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 :
in html file :
<select>
<option ng-repeat="prod in testAccounts" value="{{prod.id}}">{{prod.name}}</option>
</select>
and in script file:
$http.get('document.json').success(function (data)
{
$scope.testAccounts = angular.fromJson(data);
}
and other one ng-options :
in html file :
<select ng-model="selectedTestAccount" ng-options="c as c.name for c in testAccounts1"></select>
in script file:
$http.get('document.json').success(function (data)
{
$scope.testAccounts1 = data;
$scope.selectedTestAccount = $scope.testAccounts1[0];
}
Now i want to know which one is best for my project to improve the performance .Any guidelines please .
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.
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
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>
