Comment utiliser la directive angulaire ng-options-js tutoriel-php.cn

Objectif de la directive ng-options :

Utiliser un tableau ou un objet dans une expression pour générer automatiquement une liste d'options dans une sélection. Les options ng sont très similaires à ng-repeat. Dans de nombreux cas, ng-repeat peut être utilisé à la place de ng-options. Mais les options ng offrent certains avantages, tels que la réduction de la mémoire et l'amélioration de la vitesse, ainsi que la fourniture d'options de zone de sélection que les utilisateurs peuvent choisir. Lorsqu'une option est sélectionnée dans la sélection, l'option sera automatiquement liée aux données correspondantes à l'aide de ng-model. Si vous souhaitez définir une valeur par défaut, vous pouvez le faire comme ceci : $scope.selected = $scope.collection[3].

Cet article présente principalement comment utiliser les notes de commande angulaires ng-options L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

1.1 Le but de track by :

track by est principalement d'éviter la duplication de valeurs, et angulairejs signalera une erreur. Parce qu'angularjs a besoin d'une valeur unique à lier au dom généré afin de faciliter le suivi des données. Par exemple : items=["a", "a", "b"], donc ng-repeat="item in items" provoquera une erreur et utilisera ng-repeat="(key, value) dans les éléments suivis par clé" Il n'y aura aucune erreur.

1.2 Notes sur l'utilisation de ng-option

Lors de son utilisation, vous devez ajouter la directive ng-model, sinon une erreur sera signalée si elle ne peut pas être utilisée

2. Que représentent l'étiquette et la valeur dans la liste déroulante de sélection

Écrivez d'abord la liste déroulante de sélection la plus simple et la plus originale

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

Copier après la connexion

Présentez-le maintenant. Angular utilise la directive ng-options pour générer une liste déroulante. Jetez un œil au code pour générer la page

<🎜. >

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

Copier après la connexion

Regardez l'effet de la page d'aperçu. Utilisez ng- pour l'ajouter plus tard Dans la sélection générée par les options, nous utilisons l'identifiant de l'objet obj comme valeur de la sélection, et la ville. d'obj comme étiquette de la sélection

3. Trois types d'options ng Méthodes couramment utilisées :

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

Copier après la connexion

Une petite explication sur la clé et la valeur dans les méthodes d'utilisation des objets