ng-options

by Alejandro M

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body ng-app="miApp" ng-controller="MainCtrl">
  <p>
    Selecciona un usuario:
    <select ng-model="usuarioSeleccionado" ng-options="usuario.nombre + ' ' + usuario.apellido for usuario in usuarios">
      <option value=""> Selecione</option>
    </select>
  </p>
  <p>
    El usuario seleccionado es: {{usuarioSeleccionado.nombre}} {{usuarioSeleccionado.apellido}}
  </p>
  <p>group by / track by (value)</p>
  <select ng-model="usuarioSeleccionado1" data-ng-options="usuario.nombre group by usuario.rol for usuario in usuarios track by usuario.idUsuario">
    {{usuarioSeleccionado1}}
  </select>
  <p>sobre un literal (as for value)</p>
  <select ng-model="usuarioSeleccionado2" ng-options="k as v for (k,v) in literalList">
  </select>
  <p>El usuario seleccionado es: {{usuarioSeleccionado.nombre}} {{usuarioSeleccionado2}}
  </p>

</body>

JavaScript

var app = angular.module('miApp', []);
app.controller('MainCtrl', function ($scope) {
  $scope.usuarios = [{
    idUsuario: 34,
    nombre: "Juan",
    apellido: "Gonzalez",
    rol: "Admin"
  }, {
    idUsuario: 46,
    nombre: "Ana",
    apellido: "Morales",
    rol: "Admin"

  }, {
    idUsuario: 62,
    nombre: "Sara",
    apellido: "Diaz",
    rol: "User"
  }, {
    idUsuario: 18,
    nombre: "Marcos",
    apellido: "Ortega",
    rol: "User"
  }];
  $scope.usuarioSeleccionado = null;
  $scope.usuarioSeleccionado1 = {
    idUsuario: 46
  };
  $scope.usuarioSeleccionado2 = null;

  $scope.literalList = {
    "12": "1st",
    "14": "2nd"
  };
});