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!