Thursday 28 April 2016

Ng-option or ng-repeat in select tag and issue with ng-options in Angular

I came across this many times which one will be better to use, ng-option or ng-repeat while dealing with select tags. Let us see first how the code looks like.

Ng-option


 $scope.items = [
 {name:'India',label:'I'},
 {name:'USA',label:'U'},
 {name:'Russia',label:'R'},
 {name:'China',label:'C'},
 {name:'Australia',label:'A'},
 {name:'Japan',label:'J'}
];


 <select ng-options="item as item.name for item in items" ng-model="selected"></select>
 

Here we have added ng-option along with select tag itself. This provides some benefits like reducing memory and increasing speed and also more flexibility to use.

Ng-repeat

This is straight forward, see the code below


<select>
  <option ng-repeat="item in items" ng-model="select">{{item.name}}</option>
</select>

Basically ng-option is far better than ng-repeat in the case of select tags but recently I faced many issues with ng-option in fir fox some versions and I forced to re write everything back to ng-repeat. One issue I faced is that if I try to select something from the select list, scroll is going top and making very annoying experience to user's .Especially this is happening when I try to select anything at the bottom of the list. This is happening only in fir fox versions.

If somebody has any suggestions on this put it in comment box so that I can update the post as well

Related Posts

1. Disable submit button until all mandatory fields are filled - Angular

2. Angular Loader using font awesome icons

3. Angular js add class to active element


No comments :

Post a Comment