Angularjs Study Chapter (10)

AngularJS Select (select box) use Ng-options to create a selection box

In AngularJS we can use the ng-option directive to create a drop-down list, with list items looping through objects and arrays, as in the following example:

<! DOCTYPE html>ng-init= "selectedname = names[0]" ng-options= "x for x in Names"></select></div><script>    var app = Angular.module (' myApp ', []);    App.controller (' Myctrl ',function  ($scope) {        $scope. Names=[' Google ', ' Baidu ', ' Tengxun '];    }) </script></body>
Ng-init initial value, ng-options= "x for X in Names" to read the array
Create a selection box using Ng-repeat
<! DOCTYPE html>var app = Angular.module (' myApp ', []);    App.controller (' Myctrl ',function  ($scope) {        $scope. Names=[' Google ', ' Baidu ', ' Tengxun '];    }) </script></body>
The ng-repeat instruction uses an array to iterate through the HTML code to create a drop-down list, but the ng-options directive is more suitable for creating a drop-down list, which has the following advantages:
The option to use ng-options is an object, and ng-repeat is a string. When the selection value is an object, we can get more information and the application is more flexible.
<! DOCTYPE html>varApp = Angular.module (' myApp '), []); App.controller (' Myctrl ',function($scope) {$scope. Names=[{site: "Google", url: "http://www.google.com"}, {site:"Runoob", url: "Http://www.runoob.com"}, {site:"Taobao", url: "Http://www.taobao.com"}]; })</script></body>You have chosen: http://www.runoob.com----> Strings
 <! DOCTYPE html>var  app = Angular.module (' myApp ' function   ($            Scope) {$scope. Names  =[{site: "Google", url: "http://www.google.com" }, {site:  "Runoob", url: "http://www.runoob.com"  "Tao    Bao ", url:" http://www.taobao.com "}]; })  </script></body>
You chose: {"site": "Google", "url": "http://www.google.com"}----> Object data Source As Object
Use the object as the data source, x as the key (key), and y as the value (value):
<! DOCTYPE html>var app = Angular.module (' myApp ', []);    App.controller (' Myctrl ',function  ($scope) {        $scope. Names= {site1: "Google", Site2: " Http://www.google.com "};    }) </script></body>
Your choice is: Google
The value that you select is in value key-value pair .
value can also be an object in the key-value pair:
<! DOCTYPE html>varApp = Angular.module (' myApp '), []); App.controller (' Myctrl ',function($scope) {$scope. Names= {Car01: {brand: "Ford", Model: "Mustang", Color: "Red"}, Car02: {brand:"Fiat", Model: "$", Color: "White"}, Car03: {brand:"Volvo", Model: "XC90", Color: "Black"}}; })</script></body>You chose: {"brand": "Ford", "model": "Mustang", "Color": "Red"}
You can also use the object's properties directly in the drop-  down menu without using key-value, but the option is still value:
<! DOCTYPE html>varApp = Angular.module (' myApp '), []); App.controller (' Myctrl ',function($scope) {$scope. Names= {Car01: {brand: "Ford", Model: "Mustang", Color: "Red"}, Car02: {brand:"Fiat", Model: "$", Color: "White"}, Car03: {brand:"Volvo", Model: "XC90", Color: "Black"}}; })</script></body>You chose: {"brand": "Ford", "model": "Mustang", "Color": "Red"}
Angularjs Study Chapter (10)