下拉列表select显示ng-options

it2022-05-09  35

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  指令来创建一个下拉列表,列表项通过对象和数组循环输出,如下实例:

实例

< 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

相关资源:AngularJS使用ng-options指令实现下拉框

最新回复(0)