Angular select with number

Question

I've got declared a var called total = 10 in my controller. Now I want to show 10.

1 2 3 4 5 6 etc....

in my combobox. How could I do this I already tried this:

<div class="form-group">
        <label for="sel1">Aantal deelnemers:</label>
        <select class="form-control" id="sel1" ng-model="homeCtrl.selectedField"ng-options="for p in homeCtrl.totalFields"></select>
    </div>

http://stackoverflow.com/a/16824944/1132354 – Nikhil Aggarwal Apr 07 '16 at 10:46 — Nikhil Aggarwal, Apr 07 '16 at 10:46

Daniel · Answer 1 · 2016-04-07T11:00:05.923

ng-options="number for number in Array(homeCtrl.totalFields + 1).fill().map((x,i) => i)">

Edit:

For some reason the above syntax doesn't seems to work.

Here's another version

function Ctrl($scope) {
  $scope.homeCtrl = {totalFields: 10};
  $scope.selectedField = 0;
  $scope.totalFieldsArr = Array($scope.homeCtrl.totalFields + 1).fill().map((x, i) => i);
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="Ctrl">
  <select ng-model="selectedField" ng-options="number for number in totalFieldsArr"></select>
  <div>You selected: {{selectedField}} </div>
</div>

score 0 · Answer 2 · answered Apr 07 '16 at 10:47

0

You show variables from controller trough $scope. so if you wanted to show your variable you would do:

$scope.total = total; In your controller.

There is another thing with forms in angular. Forms have its own scope. As for interacting with it from the controller I would recommend that you name your form with name tag:

<form name="myForm"> ...

Then you can access it from your controller like:

$scope.myForm

and instead binding to your scope you can bind to your FORM SCOPE like:

$scope.myForm.total = total;

in your controller. Make sure that you do that after document is ready.

hope this helps, from your question I am not 100% what you are trying to do :)

answered Apr 07 '16 at 10:47

DanteTheSmith

2,937
1
16
31

Why is everybody using $scope I'm not working with that? version 1.5 – Jamie Apr 07 '16 at 11:13
I am open to suggestions how are you binding controller variables to your templates then? – DanteTheSmith Apr 07 '16 at 13:18
In my template I say: homeCtrl.value – Jamie Apr 07 '16 at 15:19

score 0 · Accepted Answer · answered Apr 07 '16 at 10:53

<div ng-app="myApp">
    <div ng-controller="control">
        <select>
        <option ng-repeat="i in getNumber(number) track by $index" value="{{$index+1}}"/>{{$index+1}}
        </select>
    </div>
</div>

script

var app = angular.module('myApp',[]);
app.controller('control',function($scope){

    $scope.number = 10;
    $scope.getNumber = function(num) {
        return new Array(num);   
    }
});

Angular select with number

3 Answers3