AngularJS Select (selection box)

AngularJS can use arrays or objects to create a drop-down list option.

Create a selection box using ng-option

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-option and ng-repeat:
We can also use the ng-repeat directive to create a drop-down list:
<! DOCTYPE html>
Ng-option and Ng-repeat use which one to make the choice box better? We tend to use ng-option, because ng-repeat has limitations, the selected value is a string, and using the Ng-options directive, the selected value is an object, and when the selection value is an object, we can get more information and the application is more flexible.
The following is a comparison of the examples:
Let's say we use the following data:
$scope. Sites = [    {site: "Google", url: "http://www.google.com"},    {site: "Runoob", url: "Http://www.runoob.com" },    {site: "Taobao", url: "http://www.taobao.com"}];
Using ng-repeat:
<! DOCTYPE html>
Using ng-options:
<! DOCTYPE html>
In the previous example we used an array as the data source, and the following we use the data object as the data source.
$scope. Sites = {    site01: "Google",    site02: "Runoob",    site03: "Taobao"};
ng-options uses objects to be very different, using objects as data sources, x as key (key), and y as value (value):
<! DOCTYPE html>
The value that you select is in value key-value pair .
value can also be an object in the key-value pair:
<! DOCTYPE html>
 You can also use the properties of the object directly in the drop-down menu without using the  key  in the  key -value pair: 
 
<! DOCTYPE html>
 AngularJS Select (selection box)