Data binding method of ng-options in AngularJS to implement drop-down list

Home>2020-03-17 05:20

Data binding method of ng-options in AngularJS to implement drop-down list

Simple use of drop-down lists

The ng-option instruction is very simple to use,Only two attributes need to be bound:

One is ng-model used to get the selected value;

The other is an array of elements used by ng-options to determine the drop-down list.

<select ng-model="engineer.currentactivity" ng-options="act for act in activities"></select>

The above statement is a two-way data binding of the selected value to engineer.currentactivity.Then the options in the list are each value in activities.Data are as follows:

$scope.engineer={
  name:"dani",  currentactivity:"fixing bugs"
  };
  $scope.activities =
  [
  "writing code",  "testing code",  "fixing bugs",  "dancing"
  ];

The operation results are as follows:

For the sake of beauty,Bootstrap is referenced here.

<html ng-app="myapp">
<head>
 <meta http-equiv="content-type" content="text/html;charset=utf-8" />
 <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
 <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow">
 <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
 <div ng-controller="engineeringcontroller">
 <div>
  {{engineer.name}} is currently:{{engineer.currentactivity}}
 </div>
 <div>
  <label for="name">choose a new activity:</label>
  <select ng-model="engineer.currentactivity"
   ng-options="act for act in activities">
  </select>
 </div>
 </div>
 <script type="text/javascript">
  var myappmodule=angular.module ("myapp", []);
  myappmodule.controller ("engineeringcontroller", ["$scope", function ($scope) {
  $scope.engineer={
  name:"dani",  currentactivity:"fixing bugs"
  };
  $scope.activities =
  [
  "writing code",  "testing code",  "fixing bugs",  "dancing"
  ];
  }]);
 </script>
</body>
</html>

Complex objects,Custom list name

Sometimes the drop-down list is not just an array of strings,May be a json object, for example:

$scope.activities =
  [
   {id:1, type:"work", name:"writing code"},   {id:2, type:"work", name:"testing code"},   {id:3, type:"work", name:"fixing bugs"},   {id:4, type:"play", name:"dancing"}
  ];

at this time,The data to be bound must be the same data in this format,For example, copy one of them directly:

$scope.engineer={
   name:"dani",   currentactivity:{
   id:3,   type:"work",   name:"fixing bugs"
   }
  };

Of course, it can also be directly specified as:

$scope.engineer={currentactivity:activities [3]}

Then in the instruction, you can cycle the name of the drop-down box at the list splicing

<select
 ng-model="engineer.currentactivity"
 ng-options="a.name +" ("+ a.type +") "for a in activities">
</select>

The operating effect is as follows:

The full code is as follows:

<html ng-app="myapp">
<head>
 <meta http-equiv="content-type" content="text/html;charset=utf-8" />
 <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
 <Link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow">
 <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
 <div ng-controller="engineeringcontroller">
 <div>
 {{engineer.name}} is currently:{{engineer.currentactivity}}
 </div>
 <div>
  <label for="name">choose a new activity:</label>
  <select
  ng-model="engineer.currentactivity"
  ng-options="a.name +" ("+ a.type +") "for a in activities">
  </select>
 </div>
 </div>
 <script type="text/javascript">
  var myappmodule=angular.module ("myapp", []);
  myappmodule.controller ("engineeringcontroller", ["$scope", function ($scope) {
  $scope.engineer={
   name:"dani",   currentactivity:{
   id:3,   type:"work",   name:"fixing bugs"
   }
  };
  $scope.activities =
  [
   {id:1, type:"work", name:"writing code"},   {id:2, type:"work", name:"testing code"},   {id:3, type:"work", name:"fixing bugs"},   {id:4, type:"play", name:"dancing"}
  ];
  }]);
 </script>
</body>
</html>

Grouping drop-down lists

In fact, grouping is very similar to the previous example.Just replace the value of ng-options in the space with the following:

<select ng-model="engineer.currentactivity"
 ng-options="a.name group by a.type for a in activities">
</select>

Adding group by will group by the following value

Full code:

<html ng-app="myapp">
<head>
 <meta http-equiv="content-type" content="text/html;charset=utf-8" />
 <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
 <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow">
 <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
 <div ng-controller="engineeringcontroller">
 <div>
 {{engineer.name}} is currently:{{engineer.currentactivity}}
 </div>
 <div>
  <label for="name">choose a new activity:</label>
  <!-<select
  ng-model="engineer.currentactivity"
  ng-options="a.name +" ("+ a.type +") "for a in activities">
  </select>->
  <select ng-model="engineer.currentactivity"
   ng-options="a.name group by a.type for a in activities">
  </select>
 </div>
 </div>
 <script type="text/javascript">
  var myappmodule=angular.module ("myapp", []);
  myappmodule.controller ("engineeringcontroller", ["$scope", function ($scope) {
  $scope.engineer={
   name:"dani",   currentactivity:{
   id:3,   type:"work",   name:"fixing bugs"
   }
  };
  $scope.activities =
  [
   {id:1, type:"work", name:"writing code"},   {id:2, type:"work", name:"testing code"},   {id:3, type:"work", name:"fixing bugs"},   {id:4, type:"play", name:"dancing"}
  ];
  }]);
 </script>
</body>
</html>

Identify by id

Because the previous ng-model is equivalent to setting a value at the beginning.When you select a drop-down list option,Will overwrite this initial value.

So more often it will be identified by an id,So when initializing the assignment,Just set an id.

$scope.engineer={
   currentactivityid:3
  };
  $scope.activities =
  [
   {id:1, type:"work", name:"writing code"},   {id:2, type:"work", name:"testing code"},   {id:3, type:"work", name:"fixing bugs"},   {id:4, type:"play", name:"dancing"}
  ];

The instructions can be written in the following format

<select
 ng-model="engineer.currentactivityid"
 ng-options="a.id as a.name group by a.type for a in activities">
</select>

With the value before as,You can determine the only option

The full code is as follows:

<html ng-app="myapp">
<head>
 <meta http-equiv="content-type" content="text/html;charset=utf-8" />
 <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
 <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow">
 <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
 <div ng-controller="engineeringcontroller">
 <div>
 current is:{{engineer.currentactivityid}}
 </div>
 <div>
  <label for="name">choose a new activity:</label>
  <select
  ng-model="engineer.currentactivityid"
  ng-options="a.id as a.name group by a.type for a in activities">
  </select>
 </div>
 </div>
 <script type="text/javascript">
  var myappmodule=angular.module ("myapp", []);
  myappmodule.controller ("engineeringcontroller", ["$scope", function ($scope) {
  $scope.engineer={
   currentactivityid:3
  };
  $scope.activities =
  [
   {id:1, type:"work", name:"writing code"},   {id:2, type:"work", name:"testing code"},   {id:3, type:"work", name:"fixing bugs"},   {id:4, type:"play", name:"dancing"}
  ];
  }]);
 </script>
</body>
</html>

javascript

Previous Python implementation of A * algorithm sample code

Next Detailed explanation of the Python standard library shutil usage examples

Trends

TutorialFor

Data binding method of ng-options in AngularJS to implement drop-down list

Related articles