How to use ng-options in angularjs

Question

The select element is not bound as expected.

html:

<select ng-model="SelectedPage" 
 ng-change="ShowPageResult();" ng-options="o for o in PageNumbers">
</select>

ctrl.js:

function BindPageNumbers() {        
        $scope.PageNumbers = [];
        for (var i = 1; i <= 2) ; i++) {
            $scope.PageNumbers.push(i);
        }      
    }

output:

<option value="0"label="1">1</option>
<option value="1" label="2">2</option>

if i put $scope.PageNumbers.push(i.toString());, then the output is

<option value="?"label=""></option>
<option value="0" label="1">1</option>
<option value="1" label="2">2</option>

expected:

<option value="1">1</option>
<option value="2">2</option>

what should be done to get the desired o/p : http://jsfiddle.net/s222904f/

Arrays are zero based so the output is exactly as expected. If you want to have a value other than what you get, you can push an object with a label and a value and use the "select as" part of the ngOptions expression. — jme11
– jme11, Commented Jul 8, 2015 at 13:39

von v. · Accepted Answer · 2015-07-08 13:50:43Z

2

In your controller:

$scope.PageNumbers = [];
for (var i = 1; i <= 2 ; i++) {
    $scope.PageNumbers.push({ id: i, value: i });
}

In your view:

<select ng-model="SelectedPage"    
    ng-options="o.id for o in PageNumbers track by o.value"></select>

answered Jul 8, 2015 at 13:50

von v.

17.1k5 gold badges62 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

KreepN Over a year ago

@Qwerty That's cause he changed your binding structure in his answer and you can't use that line when binding to an object.

Community · Accepted Answer · 2017-05-23 10:26:46Z

0

Check it: http://jsfiddle.net/khwuv4Lj/

Per the answer here, the empty option exists because the

ng-model="SelectedPage"

line binds it to an empty string. You can avoid this by setting the default value if the select in the scope.

Edit: Plnkr was updated to fix the OP's comment.

enter image description here

edited May 23, 2017 at 10:26

CommunityBot

11 silver badge

answered Jul 8, 2015 at 13:48

KreepN

8,5981 gold badge43 silver badges58 bronze badges

2 Comments

sukesh Over a year ago

The values are 0 and 1 for the options. They should be 1 & 2

KreepN Over a year ago

@Qwerty Fixed the fiddle for future people referencing this per your comment.

Collectives™ on Stack Overflow

How to use ng-options in angularjs

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related