AnjularJS中`ngoptions`使用小结

ng-options是angular-1.3新出的一个指令。ng-options属性可以在表达式中使用数组或对象来自动生成一个select中的option列表。ng-options与ng-repeat很相似，很多时候可以用ng-repeat来代替ng-options。但是ng-options提供了一些好处，例如减少内存提高速度，以及提供选择框的选项来让用户选择。

代码:

<!DOCTYPE html>
<html>
<head>
  <title>AnjularJS 中的select中的ng-options</title>
   <!-- <script type="text/javascript" src="jquery-2.2.3.min.js"></script> -->

  <script type="text/javascript" src="angular.min.js"></script>


  <script type="text/javascript">
    var app = angular.module("myApp",[]);

// 所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
// $rootScope 可作用于整个应用中。是各个controller中scope的桥梁。用rootscope定义的值,可以在各个 controller 中使用。
// 但是需要注意的是,需要将包含$rootScope的控制前定义在最前面,在它前面的控制器中是访问不到的
    app.controller('baseController',['$rootScope',function($rootScope){
      $rootScope.optData = [{
          id: 10001,
          MainCategory: '男',
          ProductName: '水洗T恤',
          ProductColor: '白'
      },{
          id: 10002,
          MainCategory: '女',
          ProductName: '圓領短袖',
          ProductColor: '黃'
      },{
          id: 10003,
          MainCategory: '女',
          ProductName: '圓領短袖',
          ProductColor: '黃'
      }];
    }]);

    app.controller("controller1",function($scope){
      $scope.selected = "";
    });

    app.controller("controller2",function($scope){
      $scope.selected = "";
    });

    app.controller("controller3",function($scope){
      $scope.selected = "";
    });

    app.controller("controller4",function($scope){
      $scope.selected = "";
    });




  </script>
</head>
<body ng-app="myApp" ng-controller="baseController">
    <!-- 1.基本下拉效果(lable for value in array)
　　其中select标签中的ng-model属性必须有，其值为选中的对象或属性值。 -->
    <div ng-controller = "controller1">
        <p>1.基本下拉效果(lable for value in array)</p>
        <p>选项:{{selected}}</p>

        <select ng-model="selected" ng-options="o.id for o in optData">
            <option value="">请选择</option>
        </select>
    </div>

    <!-- 2.自定义下拉显示名称(label for value in array)
    label可以根据需要拼接出不同的字符串 -->
    <div ng-controller = "controller2">
        <p>2.自定义下拉显示名称 label可以根据需求拼接出不同的字符串(label for value in array)</p>
        <p>选项:{{selected}}</p>

        <select ng-model="selected" ng-options="(o.ProductColor+'-'+o.ProductName) for o in optData">
        <!-- <select ng-model="selected" ng-options="o.id for o in optData"> -->
            <option value="">请选择</option>
        </select>
    </div>

    <!-- 第3种用法：ng-options 选项分组
    group by分组项 -->
    <div ng-controller = "controller3">
        <p>3.ng-options 选项分组(usage:label group by groupName for value in array)</p>
        <p>选项:{{selected}}</p>

        <select ng-model="selected" ng-options="(o.ProductColor+'-'+o.ProductName) group by o.MainCategory for o in optData">
            <option value="">-- 请选择 --</option>
        </select>
    </div>

    <!-- 第4种用法：ng-options 自定义ngModel的绑定
    下面selected的值为optData的id 效果 http://sandbox.runjs.cn/show/nhi8ubrb -->
    <div ng-controller = "controller4">
        <p>4.ng-options 自定义ngModel的绑定(usage:select as label for value in array)</p>
        <p>选项:{{selected}}</p>

        <select ng-model="selected" ng-options="o.id as o.ProductName for o in optData">
            <option value="">-- 请选择 --</option>
        </select>
    </div>
</body>
</html>

预览代码效果:http://sandbox.runjs.cn/show/r512c74a

总结:

基本用法（显示 o 对象的某一个属性值作为下拉名称）：

ng-options = ” o.attr for o in dataArr “
显示更多：同一对象显示更多下拉名称（比如需要显示 o 对象的两个或更多个属性值作为一个下拉列表项）: ng-options = ” (o.attr1 + ‘-’ + o.attr2) for o in dataArr “
选项分组（将下拉选项按照 o 对象某一属性分组显示）：

ng-options = ” (o.attr1 + ‘-’ + o.attr2) group by o.attr3 for o in dataArr “
自定义ngModel的绑定:

ng-options = ” o.attr1 as o.attr2 for o in dataArr ” ,

这时，o.attr1 是 ng-model 绑定的值，o.attr2 是下拉列表显示的值。

AnjularJS中ngoptions使用小结

AnjularJS中`ngoptions`使用小结