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 可以使用数组或对象创建一个下拉列表选项。
在AngularJS中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出,如下实例:
我们也可以使用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 :
< 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 ,直接使用对象的属性:
转载于:https://www.cnblogs.com/songyunxinQQ529616136/p/6230139.html
相关资源:AngularJS使用ng-options指令实现下拉框