Home>

1. Purpose of ng-options:

Use an array or object in an expression to automatically generate a list of options in a select. ng-options is very similar to ng-repeat. Many times you can use ng-repeat instead of ng-options. But ng-options provides some benefits,Such as reducing memory and increasing speed,It also provides the option of a selection box to let the user choose.When an option is selected in select,This option will use ng-model to automatically bind to the corresponding data.If i want to set a default value,It could look like this:$scope.selected=$scope.collection [3].

1.1 The purpose of track by:

track by is mainly to prevent duplicate values,angularjs will report an error. Because angularjs needs a unique value to bind to the generated dom to facilitate tracking data.For example:items=["a", "a", "b"], so ng-repeat="item in items" will be wrongAnd using ng-repeat="" (key, value) in items track by key "will not cause an error.

1.2 Use of ng-option

When used,You must add the ng-model instruction, otherwise it will report an error if it cannot be used

2. What does the label and value represent in the select drop-down box?

Write the simplest and most original select drop-down box first

<! Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge, chrome=1">
<Title>What is label and value?</Title>
</head>
<body>
  <select>
    <!-
      value is the value stored in the database,label is the value displayed on the page
      value is the value of 1, 2, 3, 4;
      lable is "language" "math" these
  ->
    <option value="1">Language</option>
    <option value="2">Math</option>
    <option value="3">English</option>
    <option value="4">creature</option>
  </select>
</body>
</html>

Now introduce angular to use ng-options directive to generate a drop-down box,Take a look at the code that generates the page

<! Doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge, chrome=1">
  <Title>What is label and 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 is the value stored in the database,label is the value displayed on the page
      value is the value of 1, 2, 3, 4;
      lable is "language" "math" these
  ->
      <option value="1">Language</option>
      <option value="2">Math</option>
      <option value="3">English</option>
      <option value="4">creature</option>
    </select>
    <br>
    <br>
    <br>
    <div>{{selectedcity}}
      <br>
      <!-Here c.id as c.city for c in obj we use the id of the obj object as the value of the select and the city of obj as the label of the select->
      <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":"Beijing"},      {"id":"sh", "city":"Shanghai"},      {"id":"zz", "city":"Zhengzhou"}
    ];
  }])
  </script>
</body>
</html>

Take a look at the preview page effect,In the selection added later using ng-options, we use the id of the obj object as the value of the select and the city of obj as the label of the select

3. Three common methods of ng-options:

<! Doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge, chrome=1">
  <Title>What is label and 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 is the value stored in the database,label is the value displayed on the page
      value is the value of 1, 2, 3, 4;
      lable is "language" "math" these
  ->
      <option value="1">Language</option>
      <option value="2">Math</option>
      <option value="3">English</option>
      <option value="4">creature</option>
    </select>
    <div>
      <h3>Demonstrates changes in label and value values ​​</h3>{{selectedcity}}
      <!-Here c.id as c.city for c in obj we use the id of the obj object as the value of the select and the city of obj as the label of the select->
      <select ng-options="c.id as c.city for c in obj1" ng-model="selectedcity">
      </select>
    </div>
    <div>
      <h3>1. "Array" implements basic pull-down</h3>
      <p>Syntax:laber for value in array</p>
      <select ng-options="animal for animal in arr1" ng-model="selectedanimal"></select>
      <br>
    </div>
    <div>
      <h3>2. "Array containing objects" implements drop-down of "label and value different"</h3>
      <p>Syntax:select as label for value in array</p>
      <p>Which classmate do you know?Your choice is:{{selectedstu}}</p>
      <select ng-options="c.name as c.id for c in obj2" ng-model="selectedstu"></select>
      <br>
      <br>
      <br>
      <p><strong>Custom drop-down display content format</strong></p>
      <p>Which classmate do you know?Your choice is:{{selectedstustring}}</p>
      <p>Syntax:Concatenation String</p>
      <select ng-options="c.name as (c.name +"-English name:"+ c.id) for c in obj2" ng-model="selectedstustring"></select>
      <br>
      <br>
      <br>
      <p><strong>Group drop-down menus using group by</strong>
      <p>Syntax:label group by groupname for value in array</p>
      <p>Which classmate do you know?Your choice is:{{selectedstustring2}}</p>
      <select ng-options="c.name group by c.sex for c in obj2" ng-model="selectedstustring2"></select>
    </div>
    <div>
      <h3>3. "Object" implements basic pull-down</h3>
      <p>Syntax 1:label for (key, value) in object</p>
      <p>Which city?Your choice is:{{scity}}</p>
      <select ng-options="key for (key, value) in obj3" ng-model="scity"></select>
      <p>Syntax 2:select as label for (key, value) in object</p>
      <p>Which city?Your choice is:{{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) {
    //Define an array containing objects obj1
    $scope.obj1=[
      {"id":"bj", "city":"Beijing"},      {"id":"sh", "city":"Shanghai"},      {"id":"zz", "city":"Zhengzhou"}
    ];
    $scope.selectedcity="bj";
    //define array
    $scope.arr1=["Baibai", "Atan", "Panda"];
    //definition default is "big white"
    $scope.selectedanimal="Big White";
    //Define an array containing objects obj2
    $scope.obj2=[
      {"id":"lilei", "name":"", "sex":"man"},      {"id":"hanmeimei", "name":"", "sex":"woman"},      {"id":"jack", "name":"Jack", "sex":"man"}
    ];
    $scope.selectedstu="Han Meimei";
    //Define a simple object obj3
    $scope.obj3={
      "":"Hubei",      "Guangdong":"Guangdong",      "Henan":"Yu"
    };
  }])
  </script>
</body>
</html>

A bit about key and value in object usage

4, ng-options all usage supplement

Examples in red are already in the code,The rest please digest your own understanding test

For arrays:

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)

For objects:

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
  • Previous Detailed upload examples of HttpURLConnection attachments in Java
  • Next Based on Nodejs template engine tutorial-jade speed learning and actual combatOne
  • Trends