上一节:
下一节:

  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>
    尝试一下

  • 相关页面

返回 AngularJS 参考手册
上一节:
下一节: