<div ng-app="app"> <div ng-controller="app.selectCtrl as ctrl" class="container"> <h4>AngularJS ngOptions Directive by ozkary.com</h4> <div class="row bg-primary"> <div class="col-md-12"> <label class="control-label">Bind to String Array</label> <select class="form-control" ng-options="option for option in ctrl.makes" ng-model="ctrl.option1" required> <option value=""></option> </select> <br/> <label class="control-label">Selected Option 1: ng-options="option for option in ctrl.makes"</label> <div class="">{{ctrl.option1}}</div> </div> </div> <br/> <div class="row bg-primary"> <div class="col-md-12"> <label class="control-label">Bind to Object</label> <select class="form-control" ng-options="car as car.model for car in ctrl.cars" ng-model="ctrl.option2" required> <option value=""></option> </select> <br/> <label class="control-label">Selected Option 2: ng-options="car as car.model for car in ctrl.cars"</label> <div class="">{{ctrl.option2}}</div> </div> </div> <br/> <div class="row bg-primary"> <div class="col-md-12"> <label class="control-label">Bind to Object - Explicit Attributes as Key/Value</label> <select class="form-control" ng-options="car.id as car.model for car in ctrl.cars" ng-model="ctrl.option3" required> <option value=""></option> </select> <br/> <label class="control-label">Selected Option 3: ng-options="car.id as car.model for car in ctrl.cars" </label> <div class="">{{ctrl.option3}}</div> </div> </div> <br/> <div class="row bg-primary"> <div class="col-md-12"> <label class="control-label">Bind to Object - Explicit JSON</label> <select class="form-control" ng-options="{model:car.model,id: car.id } as car.model for car in ctrl.cars track by car.id" ng-model="ctrl.option4" required> </select> <br/> <label class="control-label">Selected Option 4: ng-options="{model:car.model,id: car.id } as car.model for car in ctrl.cars track by car.id"</label> <div class="success">{{ctrl.option4}}</div> </div> </div> <br/> <div class="row bg-primary"> <div class="col-md-12"> <label class="control-label">Bind to Object - Not tracking selected value</label> <select class="form-control" ng-options="{model:car.model,id: car.id } as car.model for car in ctrl.cars" ng-model="ctrl.option5" required> </select> <br/> <label class="control-label">Selected Option 5: ng-options="{model:car.model,id: car.id } as car.model for car in ctrl.cars"</label> <div class="success">{{ctrl.option5}}</div> </div> </div> </div> </div> <br/>
(function (angular) { 'use strict'; var appName = 'app'; var app = angular.module(appName, ['ui.bootstrap']); app.controller('app.selectCtrl', ['$scope',selectCtrl]); function selectCtrl($scope) { var ctrl = this; ctrl.makes = ['Nissan', 'Ford', 'Toyota']; ctrl.cars = [{ id: 1000, year: 1999, make: 'Nissan', model: 'Altima' }, { id: 1005, year: 1999, make: 'Nissan', model: 'Cube' }, { id: 1010, year: 2011, make: 'Nissan', model: 'Rogue' }, { id: 1020, year: 2011, make: 'Nissan', model: 'xTerra' }]; ctrl.option1 = ''; ctrl.option2 = ''; ctrl.option3 = ''; ctrl.option4 = ''; ctrl.option5 = ''; } })(angular);