下拉列表select显示ng-options

js中如何处理：

it-equipment-list-maintenance-create-controller.js

'use strict';

myApp.controller(
'itEquipmentCreatController', [
'ItEquipmentCommonService',
'$scope',
'$location',
'$http',
function(ItEquipmentCommonService,$scope,$location,$http,$timeout) {
$scope.titleText= "设置项目-IT设备清单";//title show
$scope.proText="---选项目编号--";==页面中显示为默认值
//rack
$scope.backSearch = function(path){
$location.path(path);
};
/**
*调用service
*/
ItEquipmentCommonService.queryProNoes($scope);//查询项目编号
ItEquipmentCommonService.queryProInfo($scope);//根据项目编号，查询项目相关信息
}
]);

it-equipment-list-maintenance-common-service.js

'use strict';

/**
* ItEquipmentCommonService
*/

myApp.factory('ItEquipmentCommonService', [ '$resource', '$http',
function($resource, $http) {
return new ItEquipmentCommonService($resource, $http);
} ]);

// var FunctionResource = resource('role/queryAll', {},
// actions);
// FunctionResource.get(scope.page, function(data) {
// scope.gridOptions.totalItems = data.page.totalRow;
// scope.gridOptions.data = data.data;
// scope.page = data.page;
// }, function(error) {
// });

html中如何处理：

1 下拉列表中可以显示id-name的格式，这样的格式用+拼接

<select ng-model="proNo" ng-disabled="isDisable" class="form-control" ng-options="c.proNo +'-'+c.proName for c in proNoes" >

<option value=" "> {{proText}} </option> 默认值
</select>

2 下拉列表中只显示1个值

<select ng-model="proNo" ng-disabled="isDisable" class="form-control" ng-options="c.proNo for c in proNoes" >

<option value=""> {{proText}} < /option> 默认值
</select>

<select ng-model="proNo" ng-disabled="isDisable" class="form-control" ng-options="c.proNo as c.proNo for c in proNoes" >

<option value=""> {{ proText}} </option> 默认值
</select>

这里的as是什么意思我不懂，哪位知道的话告诉我一声啊

<select ng-model="proNo" ng-disabled="isDisable" class="form-control" ng-options="c.proNo as c.proName for c in proNoes" >

<option value=""> {{ proText}} </option> 默认值
</select>

js中处理默认被选中：

$scope.cities=[ 
                {name:"合肥",id:2}, 
                {name:"北京",id:3}, 
                {name:"上海",id:4}, 
                {name:"舒城", id:5}, 
                {name:"纽约",id:6}, 
                {name:"络上几",id:7} 
            ]; 
            
            for(var i in $scope.cities){ 
                if($scope.cities[ i].id==4){//将d是4的城市设为选中项. 
                    $scope.city=$scope.cities[i]; 
                    break; 
                } 
            } 

如上面的代码中，可以在controller层将设置的默认值，设置为列表的第一个选项

'use strict';

myApp.controller(
'itEquipmentCreatController', [
'ItEquipmentCommonService',
'$scope',
'$location',
'$http',
function(ItEquipmentCommonService,$scope,$location,$http,$timeout) {
$scope.titleText= "设置项目-IT设备清单";//title show
//rack
$scope.backSearch = function(path){
$location.path(path);
};
/**
*调用service
*/
$scope.proText=" ---选项目编号--";==页面中不再显示该值，而是显示for循环中设定的第1个列表值为默认值
ItEquipmentCommonService.queryProNoes($scope);//查询项目编号
ItEquipmentCommonService.queryProInfo($scope);//根据项目编号，查询项目相关信息
for(var i=0;i<=$scope.proNoes.length;i++ ){
if(i==0){
$scope.proText =$scope.proNoes[i].proNo+"-"+$scope.proNoes[i].proName;
break;
}
}
}
]);

下拉列表ng-model中存储的是被选中的值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular. min.js"></script>
</head>
<body>

<p>选择一辆车:</p>

<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars"></select>
<p>你选择的是: {{selectedCar.brand}}</p>
<p>型号为: {{selectedCar.model}}</p>
<p>颜色为: {{selectedCar.color}}</p>

<p>下拉列表中的选项也可以是对象的属性。</p>

</div>

</body>
</html>

相关select说明：摘自菜鸟教程：

AngularJS Select(选择框)

AngularJS 可以使用数组或对象创建一个下拉列表选项。

使用ng-options 创建选择框

在AngularJS中我们可以使用 ng-option 指令来创建一个下拉列表，列表项通过对象和数组循环输出，如下实例:

实例

< div ng-app= "myApp" ng-controller= "myCtrl" >

< select ng-model= "selectedName" ng-options= "x for x in names" >
< /select >

< /div >

< script >

var app = angular.module( 'myApp', []);
app.controller( 'myCtrl', function($scope) {
$scope.names = [ "Google", "Runoob", "Taobao"];
}) ;

< /script >

尝试一下»

ng-options 与ng-repeat

我们也可以使用ng-repeat 指令来创建下拉列表：

实例

< select >
< option ng-repeat= "x in names" > {{x}} < /option >
< /select >

尝试一下»

ng-repeat 指令是通过数组来循环HTML代码来创建下拉列表，但 ng-options 指令更适合创建下拉列表，它有以下优势：

使用 ng-options 的选项的一个对象， ng-repeat 是一个字符串。

应该用哪个更好?

假设我们使用以下对象:

$scope . sites = [ { site : "Google" , url : "http://www.google.com" }, { site : "Runoob" , url : "http://www.runoob.com" }, { site : "Taobao" , url : "http://www.taobao.com" } ];

ng-repeat 有局限性，选择的值是一个字符串:

实例

使用 ng-repeat :

< select ng-model= "selectedSite" >
< option ng-repeat= "x in sites" value= "{{x.url}}" > {{x.site}} < /option >
< /select >

< h1 >你选择的是: {{selectedSite}} < /h1 >

尝试一下»

使用 ng-options 指令，选择的值是一个对象：

实例

使用 ng-options :

< select ng-model= "selectedSite" ng-options= "x.site for x in sites" >
< /select >

< h1 >你选择的是: {{selectedSite.site}} < /h1 >
< p >网址为: {{selectedSite.url}} < /p >

尝试一下»

当选择值是一个对象时，我们就可以获取更多信息，应用也更灵活。

数据源为对象

前面实例我们使用了数组作为数据源，以下我们将数据对象作为数据源。

$scope . sites = { 
    site01 : "Google" , 
    site02 : "Runoob" , 
    site03 : "Taobao" };

ng-options 使用对象有很大的不同，如下所示：

实例

使用对象作为数据源, x 为键(key), y 为值(value):

< select ng-model= "selectedSite" ng-options= " x for (x, y) in sites " >
< /select >

< h1 >你选择的值是: {{selectedSite}} < /h1 >

尝试一下»

你选择的值为在key- value 对中的 value。

value 在key- value 对中也可以是个对象：

实例

选择的值在key- value 对的 value 中,这是它是一个对象:

$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color : "red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
};

尝试一下»

在下拉菜单也可以不使用 key -value对中的 key ,直接使用对象的属性：

实例

< select ng-model= "selectedCar" ng-options= " y.brand for (x, y) in cars" >
< /select >

尝试一下»