下拉列表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 ...
随机推荐
- BZOJ4380 : [POI2015]Myjnie
将$c$离散化,设: $f[i][j][k]$为区间$[i,j]$最小值为$k$的最大收益. $g[i][j][k]$为$\max(g[i][j][k..m])$. $h[i][j]$为对于当前DP区 ...
- ES5中新增的Array方法详细说明
一.前言-索引 ES5中新增的不少东西,了解之对我们写JavaScript会有不少帮助,比如数组这块,我们可能就不需要去有板有眼地for循环了. ES5中新增了写数组方法,如下: forEach (j ...
- ACM BUYING FEED
BUYING FEED 时间限制:3000 ms | 内存限制:65535 KB 难度:4 描述 Farmer John needs to travel to town to pick up ...
- YSLOW
什么是YSlow? YSlow是Yahoo发布的一款基于FireFox的插件. 如何安装YSlow? 安装YSlow必须首先先安装 Firebug,然后下载YSlow,再对其安装. YSlow有什么用 ...
- c 语言结构体的三种定义方式
struct 结构体名{ 成员列表: ..... }结构体变量: 结构体类型变量的定义 结构体类型变量的定义与其它类型的变量的定义是一样的,但由于结构体类型需要针对问题事先自行定义,所以结构体 ...
- poj 1847 最短路简单题，dijkstra
1.poj 1847 Tram 最短路 2.总结:用dijkstra做的,算出a到其它各个点要改向的次数.其它应该也可以. 题意: 有点难懂.n个结点,每个点可通向ki个相邻点,默认指向第一个 ...
- java枚举使用详解
在实际编程中,往往存在着这样的“数据集”,它们的数值在程序中是稳定的,而且“数据集”中的元素是有限的. 例如星期一到星期日七个数据元素组成了一周的“数据集”,春夏秋冬四个数据元素组成了四季的“数据集” ...
- 配置hooks使svn提交后自动同步客户端代码（客户端与服务端在同一台机器上）
1.配置svn的hooks 2.实例演示 1.配置svn的hooks 1.1)配置情况 承接上篇svn搭建的文章,今次继续使用上篇文章的配置 上篇文章的地址:linux下搭建svn代码库 svn仓库所 ...
- windows与linux之间传输文件
1.使用SSH Secure Shell Client 百度网盘 下载地址 http://pan.baidu.com/s/1kTmp00J 2.使用pscp 百度网盘地址:http://pan.bai ...
- Linux文件锁flock
Linux文件锁flock 在多个进程同时操作同一份文件的过程中,很容易导致文件中的数据混乱,需要锁操作来保证数据的完整性,这里介绍的针对文件的锁,称之为“文件锁”-flock. flock,建议性锁 ...