angular js ng-option not working for select tag

Question

I'm trying to get the ng-option to use a JSON formatted array, but not sure why it's not displaying the select option rows. For instance:

index.js:

$scope.seloptions= [{ key: k1, name: n1 },{ key: k2, name: n2 }];

index.html:

<select name="set_aside" ng-model="set_aside" ng-options="option.key for option in seloptions track by name"></select>

I have no idea what I'm doing wrong. The select tag is not getting populated.

EDIT Also assume that the necessary setup for the angular code is there and both files are in same directory.

Answer 1

The problem is that you are tracking by name which is undefined. update line :

ng-options="option.key for option in seloptions track by name"

to

ng-options="option.key for option in seloptions track by option.name"

Working example :

 var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope) { $scope.seloptions= [{ key: "key1", name: "n1" },{ key:" key2", name: "n2" }]; });

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app="plunker"> <div ng-controller="MainCtrl"> <select name="set_aside" ng-model="set_aside" ng-options="option.key for option in seloptions track by option.name"> <option value="">Select One</option> </select> </div> </body>

angular js ng-option not working for select tag

Question

1 answers

solution1
1 ACCPTED 2018-08-17 19:13:55

angular js ng-option not working for select tag

Question

1 answers

solution1 1 ACCPTED 2018-08-17 19:13:55

solution1
1 ACCPTED 2018-08-17 19:13:55