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

Disable submit button until all mandatory fields are filled - Angular

Here I am going to explain how we can disable a submit button using a simple reusable directive until all the mandatory fields are filled. I have explained same using Angular 2 concept as well, please check this link for that. Let us start with a simple form first

Html

<div ng-app="sampleapp">
    <div ng-controller="samplecontoller" >
     <form name="form" disable-btn ng-submit="submitForm()">
       <div>
          <input type="text" ng-model="model.name" required></input>
      </div>
      <div>
        <input type="number" ng-model="model.number" required></input>
       </div>
      <div>
        <button class="btn btn-primary" type="submit">Submit</button>
      </div>
    </form>  
    </div>
</div>

In the above html "disable-btn" is the directive which we are going to create. I have marked both fields are mandatory using required attribute. Let us start with our directive.

Angular directive for disabling submit button

angular.module('sampleapp').directive('disableBtn',
function() {
 return {
  restrict : 'A',
  link : function(scope, element, attrs) {
   var $el = $(element);
   var submitBtn = $el.find('button[type="submit"]');
   var _name = attrs.name;
   scope.$watch(_name + '.$valid', function(val) {
    if (val) {
     submitBtn.removeAttr('disabled');
    } else {
     submitBtn.attr('disabled', 'disabled');
    }
   });
  }
 };
}
);

We are done with our directive, now you can see that submit button will be disabled until all the mandatory fields are filled. Check the below fiddle and see how it is working.

Using the same directive you can handle pattern validation as well. Also you can set max length/min length. For example see the below sample form.

<input type="number"placeholder="Last Name"  ng-model="model.age" required></input>

<input type="text" ng-model="model.city" ng-minlength="2" ng-maxlength="20" required>

<input type="text" ng-model="model.phoneNumber" pattern="^(?=.*?[1-9])[0-9()-]+$" 
maxlength="25" placeholder="Phone Number" />  

Related Posts

1. Angular js client side pagination like google.

2. Angular Loader using font awesome icons

3. Angular js add class to active element