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;
}
}
}
]);
下拉列表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>
<div ng-app="myApp" ng-controller="myCtrl">
<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>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.cars = {
car01 : {brand : "Ford", model : " Mustang", color : "red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : " black"}
}
});
</script>
</body>
</html>
相關select說明：摘自菜鳥教程：
AngularJS Select(選擇框)
AngularJS 可以使用數組或對象創建一個下拉列表選項。
使用ng-options 創建選擇框
在AngularJS中我們可以使用 ng-option 指令來創建一個下拉列表，列表項通過對象和數組循環輸出，如下實例:
實例
< select ng-model= "selectedName" ng-options= "x for x in names" >
< /select >
< /div >
< script >
app.controller( 'myCtrl', function($scope) {
$scope.names = [ "Google", "Runoob", "Taobao"];
}) ;
嘗試一下»
ng-options 與ng-repeat
我們也可以使用ng-repeat 指令來創建下拉列表：
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 :
< option ng-repeat= "x in sites" value= "{{x.url}}" > {{x.site}} < /option >
< /select >
< h1 >你選擇的是: {{selectedSite}} < /h1 >
嘗試一下»
使用 ng-options 指令，選擇的值是一個對象：
實例
使用 ng-options :
< /select >
< h1 >你選擇的是: {{selectedSite.site}} < /h1 >
< p >網址為: {{selectedSite.url}} < /p >
嘗試一下»
當選擇值是一個對象時，我們就可以獲取更多信息，應用也更靈活。
數據源為對象
前面實例我們使用了數組作為數據源，以下我們將數據對象作為數據源。
$scope . sites = { site01 : "Google" , site02 : "Runoob" , site03 : "Taobao" };
ng-options 使用對象有很大的不同，如下所示：
實例
使用對象作為數據源, x 為鍵(key), y 為值(value):
< /select >
< h1 >你選擇的值是: {{selectedSite}} < /h1 >
嘗試一下»
你選擇的值為在key- value 對中的 value。
value 在key- value 對中也可以是個對象：
實例
選擇的值在key- value 對的 value 中,這是它是一個對象:
car01 : {brand : "Ford", model : "Mustang", color : "red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
};
嘗試一下»
在下拉菜單也可以不使用 key -value對中的 key ,直接使用對象的屬性：