下拉列表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 ...
随机推荐
- 【BZOJ3531】[Sdoi2014]旅行 树链剖分+动态开点线段树
[BZOJ3531][Sdoi2014]旅行 Description S国有N个城市,编号从1到N.城市间用N-1条双向道路连接,满足从一个城市出发可以到达其它所有城市.每个城市信仰不同的宗教,如飞天 ...
- JavaScript 开发者经常忽略或误用的七个基础知识点
JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和灵活的模式来改进它.昨天我们将这些模式应用到了 JavaScript 框架中,今天这些框架又驱动了我们的 Web 应用程序.很多新 ...
- Win10 利用安装盘启用 .NET Framework 3.5
以管理员身份运行命令提示符,在“管理员:命令提示符”窗口中输入以下命令:dism.exe /online /enable-feature /featurename:netfx3 /Source:D:\ ...
- Delphi中对BCD码的直接支持 (转)
最近在Delphi下写软件,需要将数据转换为BCD码和将BCD码转换为其它数据类型,从网上搜索了一下,没有发现好的函数,于是就想自定义函数来完成BCD与其它格式的数据转换功能.但最终没有动手写,先查查 ...
- 关于Go，你可能不注意的7件事(转的)
http://tonybai.com/2015/09/17/7-things-you-may-not-pay-attation-to-in-go/ code https://github.com/bi ...
- php xls 导出乱码解决方案
采用phpmyadmin的处理方式 //这个很关键 BU 订单号 产品ID 产品名称 原价 售价 房间 成人数 小孩数 总人数 出团日期 出团天数差 客人信息 姓名 性别 年龄 总价 下单日期 订单状 ...
- 使用cjson进行对象的嵌套封装
共分两个部分,1)创建json.2)解析json 1)创建嵌套json的代码 char * makeJson() { cJSON * pRoot = NULL; cJSON * pSub_1 = NU ...
- Max Sum Plus Plus——A
A. Max Sum Plus Plus Now I think you have got an AC in Ignatius.L's "Max Sum" problem. To ...
- CSS Hack汇总快查(CSS兼容代码演示)
文章出处和来源网址:http://www.divcss5.com/css-hack/c284.shtml 以下是常用CSS HACK问题及解决代码-DIV+CSS网支持 1.屏蔽IE浏览器(也就是IE ...
- [LintCode] Happy Number 快乐数
Write an algorithm to determine if a number is happy. A happy number is a number defined by the foll ...