下拉列表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);
} ]);
?
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;
}
}
}
]);
<!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>
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 >
嘗試一下?
轉載于:https://www.cnblogs.com/songyunxinQQ529616136/p/6230139.html
總結
以上是生活随笔為你收集整理的下拉列表select显示ng-options的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 模块熟悉
- 下一篇： Protobuf c++使用小坑（set