i have to display the JSON data in drop down list ,for that i have two options one of the options is By using ng-repeat and other one is ng-options.
ng-repeat code :
As far as performance is regarded, I think you should use your own directive that will handle it.
ng-options puts every element in $watch => gets really slow if the list contains hundreds elements
ng-repeat will be slow to be rendered.
You should then prefer using your own directive, and build your html into it
I think that ng-options, because that is meant to be used in cases like this.
Angularjs Docs:-
ngOptions provides an iterator facility for the element which should be used instead of ngRepeat when you want the select model to be bound to a non-string value. This is because an option element can only be bound to string values at present.
The code below (also in Plunker) shows no difference even when the model is bound to a non-string value (an arithmetic code) except for the initialization where the approach with ng-repeat
fails to display the default value (or maybe there's a workaround for that as well). After a value is chosen the behavior is the same:
<html>
<head>
<title>making choices </title>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js'></script>
</head>
<body ng-app='theApp' ng-controller='TheController as ctl'>
<div ng-controller='TheController as ctl'>
Select your favorite fruit:
<select ng-model='ctl.selectedFruitCode'>
<option ng-repeat='fruit in ctl.fruits' ng-value='fruit.code'>{{fruit.label}}</option>
</select>
<br/>
Selected fruit is: <tt>{{ctl.getSelectedFruit().label}}</tt> (from code: {{ctl.selectedFruitCode}})
</div>
<hr>
<div ng-controller='TheController as ctl'>
Select your favorite fruit:
<select ng-model='ctl.selectedFruitCode'
ng-options='c.code as c.label for c in ctl.fruits'>
</select>
<br/>
Selected fruit is: <tt>{{ctl.getSelectedFruit().label}}</tt> (from code: {{ctl.selectedFruitCode}})
</div>
<script type='text/javascript'>
angular.module('theApp', [])
.controller('TheController', [function() {
var self = this;
self.fruits = {};
self.fruits = [{label: 'Apples' , code:0},
{label: 'Bananas' , code:1},
{label: 'Peach' , code:2},
{label: 'Apricot' , code:3}];
self.selectedFruitCode = self.fruits[0].code;
self.getSelectedFruit = function() {
for (var i = 0 ; i < self.fruits.length ; i++) {
if (self.fruits[i].code==self.selectedFruitCode)
return self.fruits[i];
}
};
}]);
</script>
</body>
</html>