下拉列表显示ng-options

Posted 2020-08-25 宋赟鑫 https://meilishiyan-song.t

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);
} ]);

 

function ItEquipmentCommonService(resource, http) {
//使用resource进行访问
var actions = {
‘get‘ : {
method : ‘GET‘,
},
‘query‘ : {
method : ‘GET‘,
isArray : true
},
‘save‘ : {
method : ‘POST‘,
isArray : true,
},
‘update‘ : {
method : ‘PUT‘,
isArray : true,
},
‘remove‘ : {
method : ‘DELETE‘,
isArray : true
}
};
/**查询项目编号列表**/
var data =[{
"proNo":"01",
"proName":"项目1",
"proType":"01"
},
{
"proNo":"02",
"proName":"项目2",
"proType":"02"
}];
this.queryProNoes = function(scope) {
scope.proNoes = data;
};
/**根据项目编号,查询项目相关信息**/
var info ={
"proName":"项目名称",
"proManager":"项目负责人",
"filePath":"d://files/mypic/1.doc",
"SIcount":"2",//ST数量
"daysTri":"10",//差旅无住宿天数
"travelDays":"20",//差旅住宿天数
"mealTimes":"60",//餐饮次数
"transportation":"2563.52",//大工程运输费
"standbyTimes":"256"
};
this.queryProInfo = function(scope) {
scope.proInfo = info;
};
};

 

// 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;
}
}
}
]);