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 as p.name for p in players">          
      </select>
        player: {{ player }}
      <br><br>
      <select ng-model="player1" ng-options="p.name as p.number for p in players">        
      </select>
      player1: {{ player1 }}
    </div>
</div>

JavaScript

//set the option object to a primitive field in an object in an array.
// use 'as' - 

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"
        }
    };
});