Detailed explanation of AngularJS Select (select box)

1. Select Overview

In AngularJS, you can use the ng-option directive to create a drop-down list, and the list items are output 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 = ('myApp', []);
  ('myCtrl', function($scope) {
    $ = ["Google", "Runoob", "Taobao"];
  });
</script>

2. The data source is an object

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

&lt;div ng-app="myApp" ng-controller="myCtrl"&gt;
  &lt;p&gt;Choose a car:&lt;/p&gt;
  &lt;select ng-model="selectedCar" ng-options="x for (x, y) in cars"&gt;
  &lt;/select&gt;

  &lt;h1&gt;What you chose is: {{}}&lt;/h1&gt;
  &lt;h2&gt;Model: {{}}&lt;/h2&gt;
  &lt;h3&gt;color: {{}}&lt;/h3&gt;

  &lt;p&gt;Note that the selected value is an object。&lt;/p&gt;
&lt;/div&gt;

&lt;script&gt;
  var app = ('myApp', []);
  ('myCtrl', function($scope) {
    $ = {
      car01 : {brand : "Ford", model : "Mustang", color : "red"},
      car02 : {brand : "Fiat", model : "500", color : "white"},
      car03 : {brand : "Volvo", model : "XC90", color : "black"}
    }
  });
&lt;/script&gt;

The selected value is a property of the value object in the key-value pair:

&lt;div ng-app="myApp" ng-controller="myCtrl"&gt;
  &lt;p&gt;Choose a car:&lt;/p&gt;
  &lt;select ng-model="selectedCar" ng-options=" for (x, y) in cars"&gt;
  &lt;/select&gt;
  &lt;p&gt;What you chose is: {{}}&lt;/p&gt;
  &lt;p&gt;Model number is: {{}}&lt;/p&gt;
  &lt;p&gt;The color is: {{}}&lt;/p&gt;
  &lt;p&gt;The options in the drop-down list can also be attributes of the object.。&lt;/p&gt;
&lt;/div&gt;

&lt;script&gt;
  var app = ('myApp', []);
  ('myCtrl', function($scope) {
    $ = {
      car01 : {brand : "Ford", model : "Mustang", color : "red"},
      car02 : {brand : "Fiat", model : "500", color : "white"},
      car03 : {brand : "Volvo", model : "XC90", color : "black"}
    }
  });
&lt;/script&gt;

3. ng-options and ng-repeat

You can also use the ng-repeat directive to create a drop-down list.
The ng-repeat directive is to loop through an array of HTML code to create drop-down lists, but the ng-options directive is more suitable for creating drop-down lists, and it has the following advantages:
An object using the option of ng-options, ng-repeat is a string.

1) ng-repeat has limitations, and the selected value is a string:

&lt;div ng-app="myApp" ng-controller="myCtrl"&gt;
  &lt;p&gt;Select a website:&lt;/p&gt;
  &lt;select ng-model="selectedSite"&gt;
  &lt;option ng-repeat="x in sites" value="{{}}"&gt;{{}}&lt;/option&gt;
  &lt;/select&gt;
  &lt;h1&gt;What you chose is: {{selectedSite}}&lt;/h1&gt;
&lt;/div&gt;
&lt;script&gt;
var app = ('myApp', []);
('myCtrl', function($scope) {
  $ = [
    {site : "Google", url : ""},
    {site : "Runoob", url : ""},
    {site : "Taobao", url : ""}
  ];
});
&lt;/script&gt;

2) Use the ng-options directive, and the selected value is an object:

&lt;div ng-app="myApp" ng-controller="myCtrl"&gt;

&lt;p&gt;Select a website:&lt;/p&gt;

&lt;select ng-model="selectedSite" ng-options=" for x in sites"&gt;
&lt;/select&gt;

&lt;h1&gt;What you chose is: {{}}&lt;/h1&gt;
&lt;p&gt;The URL is: {{}}&lt;/p&gt;

&lt;/div&gt;

&lt;script&gt;
var app = ('myApp', []);
('myCtrl', function($scope) {
  $ = [
    {site : "Google", url : ""},
    {site : "Runoob", url : ""},
    {site : "Taobao", url : ""}
  ];
});
&lt;/script&gt;

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.