Chapter 5: Working with AngularJS forms

by billy roberts

HTML

<script src="https://code.angularjs.org/1.3.2/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="Ctrl">
        <!—- label for value in array -—>
        <select ng-model="player" ng-options="p.number for (pos, p) in team"></select>
        player: {{ player }}
    </div>
</div>

JavaScript

// populate from an aggregated objects attributes
// assign whole object on select
// values are the outer key.

angular.module('myApp', [])
.controller('Ctrl', function($scope) {
    $scope.players = [
        {
            number: 17,
            name: "Alshon",
            position: "WR"
        },
        {
            number: 15,
            name: "Brandon",
            position: "WR"
        },
        {
            number: 22,
            name: "Matt",
            position: "RB"
        },
        {
            number: 83,
            name: "Martellus",
            position: "TE"
        },
        {
            number: 6,
            name: "Jay",
            position: "QB"
        }
    ];
    
    $scope.team = {
        '3B': {
            number: 9,
            name: "Brandon"
        },
        '2B': {
            number: 19,
            name: "Marco"
        },
        '3B': {
            number: 48,
            name: "Pablo"
        },
        'C': {
            number: 28,
            name: "Buster"
        },
        'SS': {
            number: 35,
            name: "Brandon"
        }
    };
});