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

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

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

1、ng-options指令用途：

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

1.1 track by的用途：

track by主要是防止值有重復(fù)，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ù)學(xué)”這些
  　　-->
    <option value="1">語文</option>
    <option value="2">數(shù)學(xué)</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ù)學(xué)”這些
  -->
      <option value="1">語文</option>
      <option value="2">數(shù)學(xué)</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>

看下預(yù)覽的頁面效果，在后面添加的使用 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ù)學(xué)”這些
  -->
      <option value="1">語文</option>
      <option value="2">數(shù)學(xué)</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>哪位同學(xué)你認識？你的選擇是：{{selectedStu}}</p>
      <select ng-options="c.name as c.id for c in obj2" ng-model="selectedStu"></select>
      <br>
      <br>
      <br>
      <p><strong>自定義下拉顯示內(nèi)容格式</strong></p>
      <p>哪位同學(xué)你認識？你的選擇是：{{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>哪位同學(xué)你認識？你的選擇是：{{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>

關(guān)于對象使用方法中 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)

對于對象：

label for (key , value) in object
select as label for (key ,value) in object
label group by group for (key,value) in object
label disable when disable for (key, value) in object
select as label group by group for(key, value) in object
select as label disable when disable for (key, value) in object

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

深入探究angular2 UI組件之primeNG用法
本篇文章主要介紹了深入探究angular2 UI組件之primeNG用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
Angular4學(xué)習(xí)筆記之準備和環(huán)境搭建項目
這篇文章主要介紹了Angular4學(xué)習(xí)筆記之準備和環(huán)境搭建項目，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-08-08
AngularJS使用angular.bootstrap完成模塊手動加載的方法分析
這篇文章主要介紹了AngularJS使用angular.bootstrap完成模塊手動加載的方法,結(jié)合實例形式分析了angular.bootstrap函數(shù)手動加載模塊的步驟與相關(guān)操作技巧,需要的朋友可以參考下
2017-01-01
Augularjs-起步詳解
下面小編就為大家?guī)硪黄狝ugularjs-起步詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-07-07
這篇文章主要介紹了AngularJS 使用 UI Router 實現(xiàn)表單向?qū)?的相關(guān)資料,需要的朋友可以參考下
2016-01-01