Heim > Artikel > Web-Frontend > So verwenden Sie die Angular-Direktive ng-options

So verwenden Sie die Angular-Direktive ng-options

小云云Original: 2018-02-06 09:10:381837Durchsuche

Zweck der ng-options-Direktive:

Verwenden Sie ein Array oder Objekt in einem Ausdruck, um automatisch eine Liste von Optionen in einer Auswahl zu generieren. ng-options sind ng-repeat sehr ähnlich. In vielen Fällen kann ng-repeat anstelle von ng-options verwendet werden. Aber ng-options bieten einige Vorteile, wie z. B. die Reduzierung des Speichers und die Verbesserung der Geschwindigkeit sowie die Bereitstellung von Auswahlfeldoptionen für Benutzer zur Auswahl. Wenn in der Auswahl eine Option ausgewählt wird, wird die Option mithilfe von ng-model automatisch an die entsprechenden Daten gebunden. Wenn Sie einen Standardwert festlegen möchten, können Sie dies folgendermaßen tun: $scope.selected = $scope.collection[3].

In diesem Artikel wird hauptsächlich die Verwendung von Winkelbefehlsnotizen für ng-Optionen vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

1.1 Zweck von track by:

track by dient hauptsächlich dazu, die Duplizierung von Werten zu verhindern, und AngularJS meldet einen Fehler. Weil AngularJS einen eindeutigen Wert benötigt, um sich an den generierten Dom zu binden und die Datenverfolgung zu erleichtern. Beispiel: items=["a", "a", "b"], sodass ng-repeat="item in items" einen Fehler verursacht und ng-repeat="(key, value) in items track by verwendet wird Schlüssel" Es treten keine Fehler auf.

1.2 Hinweise zur Verwendung von ng-option

Bei der Verwendung müssen Sie die ng-model-Direktive hinzufügen, andernfalls wird ein Fehler gemeldet, wenn sie nicht verwendet werden kann

2. Was bedeuten Beschriftung und Wert im Auswahl-Dropdown-Feld

Schreiben Sie zuerst das einfachste und originellste Auswahl-Dropdown-Feld

<!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>

Jetzt vorstellen Angular verwendet die ng-options-Direktive, um ein Dropdown-Feld zu generieren

<!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>

Sehen Sie sich den Vorschauseiteneffekt an, um ihn später in den durch Optionen generierten Auswahlen hinzuzufügen. Wir verwenden die ID des Objekts als Auswahlwert und die Stadt von obj als Label der Auswahl

3. Drei ng-Optionen Häufig verwendete Methoden:

<!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>

Eine kleine Erklärung zu Schlüssel und Wert in Objektnutzungsmethoden

Alle Nutzungsergänzungen für ng-Optionen

Es gibt Beispiele für die rot markierten Teile. Bitte verstehen Sie den Rest selbst.

Für Arrays:

Label für Wert im Array
als Beschriftung für Wert im Array auswählen
Beschriftung gruppieren nach Gruppe für Wert im Array
Beschriftung deaktivieren, wenn für Wert im Array deaktiviert
Beschriftung Gruppe für Gruppe für Wert im Array verfolgen nach trackexpr
Label deaktivieren, wenn für Wert im Array track by trackexpr
label für Wert im Array | einschließlich eines Filters mit Verfolgung nach)

Für Objekt:

Bezeichnung für (Schlüssel, Wert) im Objekt
als Beschriftung für (Schlüssel, Wert) im Objekt auswählen
Gruppe für Gruppe beschriften für (Schlüssel, Wert) im Objekt
Beschriftung deaktivieren, wenn Deaktivierung für (Schlüssel, Wert) im Objekt
Gruppe für Gruppe als Beschriftung für (Schlüssel, Wert) im Objekt auswählen
als Label „Deaktivieren“ auswählen, wenn Deaktivieren für (Schlüssel, Wert) im Objekt

Verwandte Empfehlungen:

Ausführliche Erklärung der ng-options-Direktive von AngularJS

Der Unterschied zwischen ng-repeat und ng-options

AngularJS-Implementierung Lösung zum Hinzufügen eines Index zu ng-Options

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Angular-Direktive ng-options. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：AngularJS-Implementierungsmethode für die SchätzzahlenfunktionNächster Artikel：AngularJS-Implementierungsmethode für die Schätzzahlenfunktion

In Verbindung stehende Artikel

Mehr sehen