AngularJS Select (Select box) Usage Details, angularjsselect

AngularJS Select (Select box) Usage Details, angularjsselect

1. Select Overview

You can use the ng-option command in AngularJS to create a drop-down list. list items are output cyclically through objects and arrays.

<div ng-app="myApp" ng-controller="myCtrl">  <select ng-model="selectedName" ng-options="x for x in names">  </select></div><script>  var app = angular.module('myApp', []);  app.controller('myCtrl', function($scope) {    $scope.names = ["Google", "Runoob", "Taobao"];  });</script>

2. The data source is an object

The selected value is the key in the key-value Pair:

<Div ng-app = "myApp" ng-controller = "myCtrl"> <p> select a car: </p> <select ng-model = "selectedCar" ng-options = "x for (x, y) in cars"> </select> 
The selected value is an attribute of the value object in the key-value Pair:
<Div ng-app = "myApp" ng-controller = "myCtrl"> <p> select a car: </p> <select ng-model = "selectedCar" ng-options = "y. brand for (x, y) in cars "> </select> <p> what you choose is: {selectedCar. brand }}</p> <p> model: {selectedCar. model }}</p> <p> color: {selectedCar. color }}</p> <p> the options in the drop-down list can also be object attributes. </P> </div> <script> var app = angular. module ('myapp', []); app. controller ('myctrl ', function ($ scope) {$ scope. cars = {car01: {brand: "Ford", model: "Mustang", color: "red"}, car02: {brand: "Fiat", model: "500 ", color: "white"}, car03: {brand: "Volvo", model: "XC90", color: "black" }}}); </script>
3. ng-options and ng-repeat
You can also use the ng-repeat command to create a drop-down list.
The ng-repeat command uses arrays to loop through HTML code to create a drop-down list. However, the ng-options command is more suitable for creating a drop-down list. It has the following advantages:
An object that uses the ng-options Option. ng-repeat is a string.
1) ng-repeat has limitations. The selected value is a string:
<Div ng-app = "myApp" ng-controller = "myCtrl"> <p> select a website: </p> <select ng-model = "selectedSite"> <option ng-repeat = "x in sites" value = "{x. url }}" >{{ x. site }}</option> </select> 
2) using the ng-options command, the selected value is an object:
<Div ng-app = "myApp" ng-controller = "myCtrl"> <p> select a website: </p> <select ng-model = "selectedSite" ng-options = "x. site for x in sites "> </select> 
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.