AngularJS ngOptions Directive

created by ozkary.com

by ozkary

HTML

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<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...

JavaScript

(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);