Sunday, August 5, 2012

AngularJS dropdown list

How not to do dropdown list:

 
<select ng-model="anotherLocationId">
    <option ng-repeat="location in locations" value="{{location.LocationId}}">{{location.LocationName}}</option>
</select>  


Although that can also populate the dropdown list, the UI won't be able to respond to initial model value. When you use that, even anotherLocationId has value, the dropdown will still show you blank item on its initial load.


Should do this instead:


<select ng-model="locationId" ng-options="item.LocationId as item.LocationName for item in locations"></select>



Complete code:


View
<div ng-controller="TheController" ng-app>

Location:     
<select ng-model="locationId" ng-options="item.LocationId as item.LocationName for item in locations"></select>
   
    <p/>
 
Another Location:    
<select ng-model="anotherLocationId">
    <option ng-repeat="location in locations" value="{{location.LocationId}}">{{location.LocationName}}</option>
</select>    
    
    <hr/>
    
    Location: {{locationId}} <br/>
    Another Location: {{anotherLocationId}}
    
    
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​


Model
​function TheController($scope) {
    
    $scope.locations = [
        {LocationId : 7, LocationName : 'Philippines' },       
        {LocationId : 8, LocationName : 'Canada' },
        {LocationId : 9, LocationName : 'China' } ];

    $scope.locationId = 8;
    $scope.anotherLocationId = 8;
}​

Live test: http://jsfiddle.net/ELkn6/1/


Here's how to add empty value with ng-options. The second dropdown, which uses ng-repeat instead of ng-options, won't have a way to receive null value.


<div ng-app="demoApp" ng-controller="MainController as c">
<select ng-model="c.locationId" ng-options="item.LocationId as item.LocationName for item in c.locations">
  <option value>All</option>
</select>
   
    <p/>
 
Another Location:    
<select ng-model="c.locationCode">
    <option value>Unknown value</option>    
    <option>Doesn't work, ng-model can't receive null</option>    
    <option ng-value="null">Doesn't work, ng-model can't receive null too</option>
    <option value=''>Like null, empty string is a good value to denote all. However, empty string won't work on data type like number or date</option>
    <option value="ALL">Literal ALL, not a good value, as it can be a valid country code value, any code value for that matter</option>
    <option ng-repeat="location in c.locations" value="{{location.locationCode}}">{{location.LocationName}}</option>
</select>    

<hr/>

Location Id: {{c.locationId}}, Is Empty: {{c.locationId == null}}<br/>
Location Code: {{c.locationCode}}, Is Empty: {{c.locationCode == null}}

</div>

----



angular.module('demoApp', [])
 .controller('MainController', MainController);

function MainController() {
  
    this.locations = [
        {LocationId : 7, locationCode : 'CAD', LocationName : 'Canada' },       
        {LocationId : 8, locationCode : 'PHL', LocationName : 'Philippines' },
        {LocationId : 9, locationCode : 'CHN', LocationName : 'China' } 
    ];

    this.locationId = 8;
    this.locationCode = 'PHL';    
        
}



Live test: https://jsfiddle.net/d38ypmx0/


Happy Coding!


8 comments:

  1. Thanks very much. I needed this solution and found your page. Appreciated.

    ReplyDelete
  2. Nice tips that's kind of things that im lookin for.

    thanks

    ReplyDelete
  3. Thanks so much! I have been trying to implement this solution with vain for main frustrating hours or days I should say!

    ReplyDelete
  4. Good tip. I have used in my tutorial here: http://technpol.wordpress.com/2013/09/03/crud-application-with-angularjs-rails-twitter-bootstrap-and-ng-boilerplate-part-6-another-entity/

    ReplyDelete
  5. Thanks a lot...I have been scratching my head for the past two days by implementing the first method....Thanks a lot....

    ReplyDelete
  6. Hi Thanks, i am trying to implement drop down in a Ui-grid for eidting ,but i am not able to get dynamic data for dropdowm , now i am planing to do edit and save in a model popup , please any one help me how to get dynamic data in model pop up for dropdowns to edit or save

    ReplyDelete
  7. Great stuff. Thanks a lot!

    ReplyDelete