angular指令筆記ng-options的使用方法

更新時間：2017年09月18日 08:32:29 作者：沉著前進

本篇文章主要介紹了angular指令筆記ng-options的使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

1、ng-options指令用途：

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

1.1 track by的用途：

track by主要是防止值有重復，angularjs會報錯。因為angularjs需要一個唯一值來與生成的dom綁定，以方便追蹤數(shù)據(jù)。例如：items=[“a”,“a”,“b”],這樣ng-repeat=“item in items”就會出錯，而用ng-repeat=“(key,value) in items track by key”就不會出現(xiàn)錯誤了。

1.2 ng-option使用注意

使用時候，必須加 ng-model 指令，否則無法使用會報錯

2、select下拉框中l(wèi)abel和value分別代表什么

先寫個最簡單最原始的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 是存儲到數(shù)據(jù)庫中的值，label是顯示在頁面上的值 
      value 就是 1、2、3、4這些數(shù)值；
      lable 是"語文" “數(shù)學”這些
  　　-->
    <option value="1">語文</option>
    <option value="2">數(shù)學</option>
    <option value="3">英語</option>
    <option value="4">生物</option>
  </select>
</body>
</html>

現(xiàn)在引入 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 是存儲到數(shù)據(jù)庫中的值，label是顯示在頁面上的值 
      value 就是 1、2、3、4這些數(shù)值；
      lable 是"語文" “數(shù)學”這些
  -->
      <option value="1">語文</option>
      <option value="2">數(shù)學</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 的label

3、三種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>
  <style type="text/css">
  .mart30 {
    margin-top: 30px;
    border-top: 1px solid #000;
  }
  </style>
</head>

<body ng-app="myapp">
  <div ng-controller="mainCtrl">
    <select>
      <!-- 
      value 是存儲到數(shù)據(jù)庫中的值，label是顯示在頁面上的值 
      value 就是 1、2、3、4這些數(shù)值；
      lable 是"語文" “數(shù)學”這些
  -->
      <option value="1">語文</option>
      <option value="2">數(shù)學</option>
      <option value="3">英語</option>
      <option value="4">生物</option>
    </select>
    <div class="mart30">
      <h3>演示 label 和 value 值的變化</h3> {{ selectedCity }}
      <!-- 這里  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 obj1" ng-model="selectedCity">
      </select>
    </div>
    <div class="mart30">
      <h3>1. “數(shù)組”實現(xiàn)基本下拉</h3>
      <p>語法： laber for value in array</p>
      <select ng-options="animal for animal in arr1" ng-model="selectedAnimal"></select>
      <br>
    </div>
    <div class="mart30">
      <h3>2. “包含對象的數(shù)組”實現(xiàn)“l(fā)abel 和 value值不同”的下拉</h3>
      <p>語法： select as label for value in array</p>
      <p>哪位同學你認識？你的選擇是：{{selectedStu}}</p>
      <select ng-options="c.name as c.id for c in obj2" ng-model="selectedStu"></select>
      <br>
      <br>
      <br>
      <p><strong>自定義下拉顯示內容格式</strong></p>
      <p>哪位同學你認識？你的選擇是：{{selectedStuString}}</p>
      <p>語法：拼接字符串</p>
      <select ng-options="c.name as (c.name +'- 英文名：'+c.id) for c in obj2" ng-model="selectedStuString"></select>
      <br>
      <br>
      <br>
      <p><strong>使用group by對下拉菜單分組</strong></p>
      <p>語法：label group by groupName for value in array</p>
      <p>哪位同學你認識？你的選擇是：{{selectedStuString2}}</p>
      <select ng-options="c.name group by c.sex for c in obj2" ng-model="selectedStuString2"></select>
    </div>
    <div class="mart30">
      <h3>3. “對象”實現(xiàn)基本下拉</h3>
      <p>語法 1： label for (key , value) in object</p>
      <p>哪個城市？你的選擇是：{{scity}}</p>
      <select ng-options="key for (key , value) in obj3" ng-model="scity"></select>
      <p>語法 2： select as label for (key ,value) in object</p>
      <p>哪個城市？你的選擇是：{{scity01}}</p>
      <select ng-options="value as key for (key , value) in obj3" ng-model="scity01"></select>
    </div>
  </div>
  <script type="text/javascript">
  var myapp = angular.module('myapp', []);
  myapp.controller('mainCtrl', ['$scope', function($scope) {
    //定義包含對象的數(shù)組 obj1
    $scope.obj1 = [
      { "id": "bj", "city": "北京" },
      { "id": "sh", "city": "上海" },
      { "id": "zz", "city": "鄭州" }
    ];
    $scope.selectedCity = "bj";

    // 定義數(shù)組
    $scope.arr1 = ["大白", "阿貍", "熊貓"];
    //定義默認為 “大白”
    $scope.selectedAnimal = "大白";

    //定義包含對象的數(shù)組 obj2
    $scope.obj2 = [
      { "id": "lilei", "name": "李雷", "sex": "man" },
      { "id": "hanmeimei", "name": "韓梅梅", "sex": "woman" },
      { "id": "jack", "name": "杰克", "sex": "man" }
    ];
    $scope.selectedStu = "韓梅梅";

    //定義簡單對象 obj3
    $scope.obj3 = {
      "湖北": "鄂",
      "廣東": "粵",
      "河南": "豫"
    };
  }])
  </script>
</body>

</html>

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

4、ng-options 全部用法補充

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

對于數(shù)組：

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)

對于對象：