angular指令筆記（一）：ng-options

時間 2019-11-08

標籤 angular 指令筆記 options 欄目 AngularJS 简体版

原文原文鏈接

一、ng-options指令用途：javascript

在表達式中使用數組或對象來自動生成一個select中的option列表。ng-options與ng-repeat很類似，不少時候能夠用ng-repeat來代替ng-options。可是ng-options提供了一些好處，例如減小內存提升速度，以及提供選擇框的選項來讓用戶選擇。當select中一個選項被選擇，該選項將會使用ng-model自動綁定到對應數據上。若是你想設一個默認值，能夠像這樣：$scope.selected = $scope.collection[3]。css

1.1 track by的用途：
track by主要是防止值有重複，angularjs會報錯。由於angularjs須要一個惟一值來與生成的dom綁定，以方便追蹤數據。例如：items=[「a」,「a」,「b」],這樣ng-repeat=「item in items」就會出錯，而用ng-repeat=「(key,value) in items track by key」就不會出現錯誤了。html

1.2 ng-option使用注意java

使用時候，必須加 ng-model 指令，不然沒法使用會報錯angularjs

二、select下拉框中label和value分別表明什麼chrome

先寫個最簡單最原始的select下拉框數據庫

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>label 和 value 具體是什麼</title>
</head>
<body>
    <select>
        <!-- value 是存儲到數據庫中的值，label是顯示在頁面上的值 value 就是 一、二、三、4這些數值； lable 是"語文" 「數學」這些 　　-->
        <option value="1">語文</option>
        <option value="2">數學</option>
        <option value="3">英語</option>
        <option value="4">生物</option>
    </select>
</body>
</html>

如今引入 angular 使用 ng-options 指令來生成一個下拉框，看下生成頁面的代碼數組

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>label 和 value 具體是什麼</title>
    <script type="text/javascript" src="../js/angular-1.3.0.js"></script>
</head>

<body ng-app="myapp">
    <div ng-controller="mainCtrl">
        <select>
            <!-- value 是存儲到數據庫中的值，label是顯示在頁面上的值 value 就是 一、二、三、4這些數值； lable 是"語文" 「數學」這些 -->
            <option value="1">語文</option>
            <option value="2">數學</option>
            <option value="3">英語</option>
            <option value="4">生物</option>
        </select>
        <br>
        <br>
        <br>
        <div>{{ selectedCity }} <br>
            <!-- 這裏 c.id as c.city for c in obj 咱們使用 obj 對象的 id做爲select的value，使用obj 的city 做爲 select 的label -->
            <select ng-options="c.id as c.city for c in obj" ng-model="selectedCity">
            </select>
        </div>
    </div>


    <script type="text/javascript">
    var myapp = angular.module('myapp', []); myapp.controller('mainCtrl', ['$scope', function($scope) { $scope.selectedCity = "bj"; $scope.obj = [ { "id": "bj", "city": "北京" }, { "id": "sh", "city": "上海" }, { "id": "zz", "city": "鄭州" } ]; }]) </script>
</body>

</html>

看下預覽的頁面效果，在後面添加的使用 ng-options 生成的select中，咱們使用 obj 對象的 id做爲select的value，使用obj 的city 做爲 select 的labelapp

三、三種ng-options經常使用方法：dom

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="utf-8">
 6     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 7     <title>label 和 value 具體是什麼</title>
 8     <script type="text/javascript" src="../js/angular-1.3.0.js"></script>
 9     <style type="text/css">
 10  .mart30 {
 11  margin-top: 30px;
 12  border-top: 1px solid #000;
 13     }
 14     </style>
 15 </head>
 16 
 17 <body ng-app="myapp">
 18     <div ng-controller="mainCtrl">
 19         <select>
 20             <!-- 
 21  value 是存儲到數據庫中的值，label是顯示在頁面上的值  22  value 就是 一、二、三、4這些數值；  23  lable 是"語文" 「數學」這些  24     -->
 25             <option value="1">語文</option>
 26             <option value="2">數學</option>
 27             <option value="3">英語</option>
 28             <option value="4">生物</option>
 29         </select>
 30         <div class="mart30">
 31             <h3>演示 label  和 value 值的變化</h3> {{ selectedCity }}  32             <!-- 這裏 c.id as c.city for c in obj 咱們使用 obj 對象的 id做爲select的value，使用obj 的city 做爲 select 的label -->
 33             <select ng-options="c.id as c.city for c in obj1" ng-model="selectedCity">
 34             </select>
 35         </div>
 36         <div class="mart30">
 37             <h3>1. 「數組」實現基本下拉</h3>
 38             <p>語法： laber for value in array</p>
 39             <select ng-options="animal for animal in arr1" ng-model="selectedAnimal"></select>
 40             <br>
 41         </div>
 42         <div class="mart30">
 43             <h3>2. 「包含對象的數組」實現「label 和 value值不一樣」的下拉</h3>
 44             <p>語法： select as label for value in array</p>
 45             <p>哪位同窗你認識？你的選擇是：{{selectedStu}}</p>
 46             <select ng-options="c.name as c.id for c in obj2" ng-model="selectedStu"></select>
 47             <br>
 48             <br>
 49             <br>
 50             <p><strong>自定義下拉顯示內容格式</strong></p>
 51             <p>哪位同窗你認識？你的選擇是：{{selectedStuString}}</p>
 52             <p>語法：拼接字符串</p>
 53             <select ng-options="c.name as (c.name +'- 英文名：'+c.id) for c in obj2" ng-model="selectedStuString"></select>
 54             <br>
 55             <br>
 56             <br>
 57             <p><strong>使用group by對下拉菜單分組</strong></p>
 58             <p>語法：label group by groupName for value in array</p>
 59             <p>哪位同窗你認識？你的選擇是：{{selectedStuString2}}</p>
 60             <select ng-options="c.name group by c.sex for c in obj2" ng-model="selectedStuString2"></select>
 61         </div>
 62         <div class="mart30">
 63             <h3>3. 「對象」實現基本下拉</h3>
 64             <p>語法 1： label for (key , value) in object</p>
 65             <p>哪一個城市？你的選擇是：{{scity}}</p>
 66             <select ng-options="key for (key , value) in obj3" ng-model="scity"></select>
 67             <p>語法 2： select as label for (key ,value) in object</p>
 68             <p>哪一個城市？你的選擇是：{{scity01}}</p>
 69             <select ng-options="value as key for (key , value) in obj3" ng-model="scity01"></select>
 70         </div>
 71     </div>
 72     <script type="text/javascript">
 73     var myapp = angular.module('myapp', []);  74  myapp.controller('mainCtrl', ['$scope', function($scope) {  75         //定義包含對象的數組 obj1
 76  $scope.obj1 = [  77  { "id": "bj", "city": "北京" },  78  { "id": "sh", "city": "上海" },  79  { "id": "zz", "city": "鄭州" }  80  ];  81  $scope.selectedCity = "bj";  82 
 83         // 定義數組
 84  $scope.arr1 = ["大白", "阿狸", "熊貓"];  85         //定義默認爲 「大白」
 86  $scope.selectedAnimal = "大白";  87 
 88         //定義包含對象的數組 obj2
 89  $scope.obj2 = [  90  { "id": "lilei", "name": "李雷", "sex": "man" },  91  { "id": "hanmeimei", "name": "韓梅梅", "sex": "woman" },  92  { "id": "jack", "name": "傑克", "sex": "man" }  93  ];  94  $scope.selectedStu = "韓梅梅";  95 
 96         //定義簡單對象 obj3
 97  $scope.obj3 = {  98             "湖北": "鄂",  99             "廣東": "粵", 100             "河南": "豫"
101  }; 102  }]) 103     </script>
104 </body>
105 
106 </html>

關於對象使用方法中 key 和 value 的一點說明

完整代碼及預覽

四、ng-options 所有用法補充

標紅部分在代碼中已有例子，其他的請自行消化理解測試

對於數組：

label for value in array
select as label for value in array
label group by group for value in array
label disable when disable for value in array
label group by group for value in array track by trackexpr
label disable when disable for value in array track by trackexpr
label for value in array | orderBy:orderexpr track by trackexpr(for including a filter with track by)

對於對象：