首頁  >  文章  >  web前端  >  angular指令ng-options如何使用

angular指令ng-options如何使用

小云云
小云云原創
2018-02-06 09:10:381861瀏覽

ng-options指令用途:

在表達式中使用陣列或物件來自動產生一個select中的option清單。 ng-options與ng-repeat很相似,很多時候可以用ng-repeat來取代ng-options。但是ng-options提供了一些好處,例如減少記憶體提高速度,以及提供選擇框的選項來讓使用者選擇。當select中一個選項被選擇,該選項將會使用ng-model自動綁定到對應資料上。如果你想設一個預設值,可以像這樣:$scope.selected = $scope.collection[3]。

本文主要跟大家介紹angular指令筆記ng-options的使用方法,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟著小編過來看看吧,希望能幫助大家。

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”就不會出現錯誤了。

1.2 ng-option使用注意

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

2、 select下拉方塊中label和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 是存储到数据库中的值,label是显示在页面上的值 
      value 就是 1、2、3、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">
  <p ng-controller="mainCtrl">
    <select>
      <!-- 
      value 是存储到数据库中的值,label是显示在页面上的值 
      value 就是 1、2、3、4这些数值;
      lable 是"语文" “数学”这些
  -->
      <option value="1">语文</option>
      <option value="2">数学</option>
      <option value="3">英语</option>
      <option value="4">生物</option>
    </select>
    <br>
    <br>
    <br>
    <p>{{ 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>
    </p>
  </p>


  <script type="text/javascript">
  var myapp = angular.module(&#39;myapp&#39;, []);
  myapp.controller(&#39;mainCtrl&#39;, [&#39;$scope&#39;, 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">
  <p ng-controller="mainCtrl">
    <select>
      <!-- 
      value 是存储到数据库中的值,label是显示在页面上的值 
      value 就是 1、2、3、4这些数值;
      lable 是"语文" “数学”这些
  -->
      <option value="1">语文</option>
      <option value="2">数学</option>
      <option value="3">英语</option>
      <option value="4">生物</option>
    </select>
    <p 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>
    </p>
    <p class="mart30">
      <h3>1. “数组”实现基本下拉</h3>
      <p>语法: laber for value in array</p>
      <select ng-options="animal for animal in arr1" ng-model="selectedAnimal"></select>
      <br>
    </p>
    <p class="mart30">
      <h3>2. “包含对象的数组”实现“label 和 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 +&#39;- 英文名:&#39;+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>
    </p>
    <p class="mart30">
      <h3>3. “对象”实现基本下拉</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>
    </p>
  </p>
  <script type="text/javascript">
  var myapp = angular.module(&#39;myapp&#39;, []);
  myapp.controller(&#39;mainCtrl&#39;, [&#39;$scope&#39;, function($scope) {
    //定义包含对象的数组 obj1
    $scope.obj1 = [
      { "id": "bj", "city": "北京" },
      { "id": "sh", "city": "上海" },
      { "id": "zz", "city": "郑州" }
    ];
    $scope.selectedCity = "bj";

    // 定义数组
    $scope.arr1 = ["大白", "阿狸", "熊猫"];
    //定义默认为 “大白”
    $scope.selectedAnimal = "大白";

    //定义包含对象的数组 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 全部用法補充

 標紅部分在程式碼中已有例子,其餘的請自行消化理解測試

#對於陣列:

  • #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

相關推薦:######## ##詳解解說AngularJS之ng-options 指令############ng-repeat和ng-options區別############AngularJS實作在ng-Options加上index的解決方法######

以上是angular指令ng-options如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn