Angularjs uses ngoption to implement the instance code of the Drop-down list _angularjs

Simple use of a drop-down list

The ng-option directive is easy to use and only requires two properties to be bound:

One is Ng-model to get the selected value;

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

The above statement is a two-way data binding of the selected value to Engineer.currentactivity, and the option in the list is each value in the activities. The data are as follows:

$scope. Engineer = {
name: "Dani",
currentactivity: "Fixing Bugs"
};
$scope. Activities =
[
"Writing Code",
"Testing Code",
"fixing bugs",
"Dancing"

Running results such as:

For the sake of beauty, Bootstrap is quoted here.

Complex objects, custom list names

Sometimes the Drop-down list is not a simple string array, it may be a JSON object, for example:

$scope. Activities =
[
{id:1, type: "Work", Name: "Writing Code"},
{id:2, type: "Work", Name: "Testing C" Ode "},
{id:3, type:" Work ", Name:" Fixing Bugs "},
{id:4, type:" Play ", Name:" Dancing "}

At this point, the bound data must be the same as the format of the data, such as directly copying one of the following:

$scope. Engineer = {
name: "Dani",
currentactivity: {
id:3,
type: "Work",
Name: "Fixing Bugs" c13/>}

Of course, it can be directly specified as:

And then in the instructions, you can loop the name of the Drop-down box in the list stitch

<select 
Ng-model = "engineer.currentactivity"
class= "Form-control"
ng-options = "A.name +" (' + A.type + ') ' for a in activities > 

Operating effects such as:

All the code is as follows: