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 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 .
Share Improve this question asked Jun 30, 2014 at 6:14 ShekkarShekkar 2443 gold badges10 silver badges22 bronze badges 4- 2 I think that ng-options, because that is meant to be used in cases like this. – Mritunjay Commented Jun 30, 2014 at 6:16
- I haven't posted it as an answer if you want I can.\ – Mritunjay Commented Jun 30, 2014 at 11:42
- yes please ,please provide i am waiting for answer @Mritunjay – Shekkar Commented Jun 30, 2014 at 11:47
- is it enough "meant to be used in cases like this" ? – Reyraa Commented Dec 1, 2014 at 11:53
3 Answers
Reset to default 1I 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./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>