ngOptions example

by Amir978

HTML

<div ng-app="myApp" ng-controller="myCtrl as vm">
    <!-- 
        ng-options explanation 

        person.id = the value that will be bind to vm.selectedPersonId 
          as 
        person.fullName = the thing to show in the drop down list 
          for 
        person= alias for each item in the data source list 
          in
        vm.people = the data source for the select 

        To bind the full person object into the vm.selectedPerson, only put in the following in ng-options:
            person.fullname for person in vm.people 

        To bind only the person id into the vm.selectedPerson, specify the full thing in ng-options: 
            person.id as person.fullname for person in vm.people 
    -->
    
    <select ng-model="vm.selectedPersonId"         
            ng-options="person.id as person.fullName for person in vm.people"></select><br/>
    Selected person Id: {{ vm.selectedPersonId }}<br/>
    
    <select ng-model="vm.selectedPerson" 
            ng-options="person.fullName for person in vm.people"></select><br/>
    Selected person: {{ vm.selectedPerson }}<br/>
</div>

JavaScript

(function (undefined) {
    'use strict';

    angular.module('myApp', []);          //module declaration

    angular.module('myApp')               //controller declaration
        .controller('myCtrl', ctrlFn);

    ctrlFn.$inject = ['$log'];            //dependency injection annotation
    function ctrlFn($log) {
        /* jshint validthis: true */
        var self = this;
        
        self.selectedPersonId = undefined;
        
        self.selectedPerson = undefined;
        
        self.people = [{
            id: 1,
            fullName: 'John Doe',
            firstName: 'John',
            lastName: 'Doe'
        }, {
            id: 2,
            fullName: 'Jane Doe',
            firstName: 'Jane',
            lastName: 'Doe'
        }];
    }
}());