下拉列表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;
}
}
}
]);
下拉列表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 ,直接使用对象的属性：
下拉列表select显示ng-options的更多相关文章
- Select显示多级分类列表
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS-005-常见下拉列表 Select 和 datalist
下拉列表在我们日常的网页浏览的过程中,随处可见,是 web 编程过程中大家非常熟悉的一个页面元素,随着 HTML 语言的日益强大,其在广大攻城狮的手中可谓是千变万化,有了很多不同的实现方式.本文主要以 ...
- 下拉列表联动显示（Car表） 三级联动
.Models namespace 下拉列表联动显示_Car表_.Models { public class ProductorBF { private MyDBDataContext _contex ...
- 用纯css改变下拉列表select框的默认样式（转）
用纯css改变下拉列表select框的默认样式 分享到 分类 JS学习 关键字 前端 发布 kris 2015-04-01 注意 转载须保留原文链接,译文链接,作者译者等信息. 在这 ...
- JS对select动态添加options操作[IE&FireFox兼容]
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
- AngularJS下拉列表select在option动态变化之后多出了一个错误项的问题
场景: Select初始化之后,选中select的某个选项 通过AngularJS更新select的选项 错误写法: HTML(使用ng-repeat) <div ng-app="Te ...
- HTML中的下拉列表 select
HTML中的下拉列表: <select> <option value ="1">Volvo</option> <option value ...
- jquery之下拉列表select
选择下拉列表中的一项,文本框显示其值 html代码如下: <select id="ttt"> <option value="Volvo" id ...
- 【转】javascript操作Select标记中options集合
先来看看options集合的这几个方法:options.add(option)方法向集合里添加一项option对象:options.remove(index)方法移除options集合中的指定项:op ...
随机推荐
- Boom.TV完成350万美元融资，目标直指VR电竞直播
3D在线电竞直播平台Boom.tv刚刚宣布已经完成350万美元的融资,该平台旨在让观众在任何设备以任意视角观看电竞比赛,并将支持VR版本. 这家位于美国加州红木城的初创公司成立于2015年,由Gupt ...
- 如何在 ejs 模板中使用 helper function 外部函数进行特殊处理？
一般我们想要在 ejs 模板中使用外部函数用于特殊的处理,比如:<%= ellipsis(title, 30) %> 通常的做法是: 使用 app.locals 来定义: app.loca ...
- HDU 3333 & 离线+线段树
题意: 统计一段区间内不同数字之和.如1 1 2 3 1 统计2---5即1+2+3. SOL: 很少打过离线的题目...这种可离线可在线的题不管怎么样一般都是强行在线... 考虑这题,此前做过一个类 ...
- Javascript与当前项目的思考
主体 分为以下三部分,能力.经验有限,欢迎拍砖. 1.低效的代码 2.面向对象的重构重复利用代码 3.调试的经验总结 第一部分 日常中低效的代码 加载和运行 <html> <he ...
- BZOJ3105: [cqoi2013]新Nim游戏 博弈论+线性基
一个原来写的题. 既然最后是nim游戏,且玩家是先手,则希望第二回合结束后是一个异或和不为0的局面,这样才能必胜. 所以思考一下我们要在第一回合留下线性基 然后就是求线性基,因为要取走的最少,所以排一 ...
- GO语言练习：for基本用法
1.代码 2.运行 1.代码 package main import "fmt" func main(){ ; k < ; k++{ JLoop: ; j < ; j+ ...
- node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用提高nodejs调试效率
在开发或调试Node.js应用程序的时候,当你修改js文件后,总是要按下CTRL+C终止程序,然后再重新启动,即使是修改一点小小的参数,也 总是要不断地重复这几个很烦人的操作.这是因为Node.js ...
- java分享第四天（循环）
While循环: while(Boolean_expression){ //statements } 在执行时,如果布尔表达式的结果为真,则循环中的动作将被执行,这将继续下去,只要该表达式的结果为真 ...
- WinForm timer控件
timer 控件:按用户定义的时间间隔引发的事件 属性: Enabled 是否启用: Interval 事件发生的事件间隔,单位是毫秒 事件只有一个:Tick 事件经过指定的时间间隔 ...
- android- 菜单
选项菜单:menu_main.xml <?xml version="1.0" encoding="utf-8"?><menu xmlns:an ...