[Angularjs]ng-select and Ng-options (reprint)

Ng-selectng-select is used to bind data to <select> tags of HTML. This instruction can be used with the Ng-model and ng-options directives to build a fine and well-behaved dynamic form. The value of ng-options can be an expression of meaning (comprehension expressions), in fact, it is just an interesting argument, simply that it can receive an array or object, and loop them, Provides internal content to options inside the Select label. It can be one of two forms. 1, the array as the data source with the values in the array to label. Use the values in the array as the selected label. Use the values in the array to make the label group. Use the values in the array as the selected label group. 2. The object is labeled as the data source with the object's key-value (Key-value). Use the key-value of the object as the selected label. Use the key-value of the object as the label group. Use the key-value of the object as the selected label group. An example

<! DOCTYPE html>"http://www.w3.org/1999/xhtml"ng-app="app">Select</title> <script src="Js/angular.min.js"></script> <script>varApp = Angular.module ('app', []); App.controller ('Selectcontroller', Function ($scope) {$scope. mycity='Beijing'; $scope. Cities= [{ID:1, Name:'Beijing'}, {ID:2, Name:'Shanghai'}, {ID:3, Name:'Guangzhou' }];    }); </script>"Selectcontroller"> <SelectNg-model="mycity"ng-options="City-City in Cities"></Select> </div></body>You will find that the text in option above is an object, which is easy to understand, because each item of the cities array is an object, and the binding will be directly bound to the object.     So how do we just let it show the Name property? <div ng-controller= "Selectcontroller" > <select ng-model= "mycity" ng-options= "City.name for City in Cities" ></select> </div>
Directly point out the properties.
The value has been shown, but it is not perfect, because the first item has no value selected by default, then we specify the default value next. $scope. mycity = ' Beijing '; Adding this code does not solve the problem, we still need to modify ng-options <select ng-model= "mycity" ng-options= "City.name as City.name For the city in Cities "></select> Let's look at the DOM ng-options the syntax for the following format for the array data Sources:label for the value in Arrayselect As label for value in Arraylabel Group by group to value in Arrayselect as label group by group to value in array track By Trackexprfor Object Data Sources:label for (key, value) in Objectselect as label for (key, value) in Objectlabel gr OUP by group for (key, value) in Objectselect as the label Group by Group for (key, value) in OB is looking at an example of a grouping, adding a group attribute to the cities array, and GROUP BY group:
<! DOCTYPE html>"http://www.w3.org/1999/xhtml"ng-app="app">Select</title> <script src="Js/angular.min.js"></script> <script>varApp = Angular.module ('app', []); App.controller ('Selectcontroller', Function ($scope) {$scope. mycity='Beijing'; $scope. Cities= [{ID:1, Name:'Beijing', Group:'China'}, {ID:2, Name:'Shanghai', Group:'China'}, {ID:3, Name:'Guangzhou', Group:'China' }];    }); </script>"Selectcontroller"> <SelectNg-model="mycity"ng-options="City.name as City.name GROUP by City.group -in Cities"></Select> </div></body>
Two-way binding the Ng-model has been specified here, and it is very convenient to get the selected value.
<! DOCTYPE html>"http://www.w3.org/1999/xhtml"ng-app="app">Select</title> <script src="Js/angular.min.js"></script> <script>varApp = Angular.module ('app', []); App.controller ('Selectcontroller', Function ($scope) {$scope. mycity='Beijing'; $scope. Cities= [{ID:1, Name:'Beijing', Group:'China'}, {ID:2, Name:'Shanghai', Group:'China'}, {ID:3, Name:'Guangzhou', Group:'China' }];    }); </script>"Selectcontroller"> <SelectNg-model="mycity"ng-options="City.name as City.name GROUP by City.group -in Cities"></Select> 
Your project code:
<td>                     Salary:</br>                    <select ng-model="gongziid" ng-options="gongzilist.id as gongzilist.name for  gongzilist in gongziobj"                         style="width:152px; ">                    </Select></td>
$scope. Gongziobj = [{ID:0, Name:'not filled'}, {ID:1, Name:'Negotiable'}, {ID:2, Name:'1000 or less'}, {ID:3, Name:'1000–2000'}, {ID:4, Name:'2000–3000'}, {ID:5, Name:'3000–4000'}, {ID:6, Name:'4000–6000'}, {ID:7, Name:'6000–8000'}, {ID:8, Name:'8000–10000'}, {ID:9, Name:'10000–20000'}, {ID:Ten, Name:'20000 or more' },     ];
$scope. Gongziid = ContentDs.source.GongZi;
[Angularjs]ng-select and Ng-options (reprint)