AngularJS ng-options 指令



  • 定义和用法

    ng-options 指令用<options>填充<select>元素。
    ng-options 指令使用数组填充下拉列表。 在许多情况下,使用 ng-repeat 指令会更容易,但是使用 ng-options 指令时您会具有更大的灵活性。
  • 语法

    <select ng-options="array expression">...</select>
    
    仅由<select>元素支持该指令
  • 参数

    参数 必需的 描述
    array expression
    该表达式选择数组的指定部分以填充选择元素。
    指定的表达式:
    • 数组中值的标签
    • 选择作为数组中值的标签
    • 标签为数组中的值分组
    • 禁用数组中的值时禁用标签
    • 按组标记数组中的值,按表达式跟踪
    • 当通过表达式禁用数组跟踪中的值时,标签禁用
    • 数组中值的标签 | 按表达式排序(orderBy)
  • 示例

    下例演示了使用 ng-options 指令时,所选值可以是一个对象:
    <!DOCTYPE html>
     <html lang="en">
     <head>
     <meta charset="UTF-8">
     <title>欢迎来到蝴蝶教程</title>
     <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
     </head>
     <body>
           <p>请选择你的汽车:  </p>
           <div ng-app="myApp" ng-controller="myCtrl">
              <select ng-model="selectedCar" ng-options="x.model for x in cars">
              </select>
              <h1>你选择了: {{selectedCar.model}} </h1>
              <p>颜色: {{selectedCar.color}} </p>
           </div> 
           <script> 
                var app = angular.module('myApp', []);
                app.controller('myCtrl', function($scope) {
                   $scope.cars = [
                         {model : "Ford Mustang", color : "red"},
                         {model : "Fiat 500", color : "white"},
                         {model : "Volvo XC90", color : "black"}
                   ];
                });
           </script> 
     </body>
     </html>