下拉列表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 ...
随机推荐
- iOS学习10之OC类和对象
本次是OC的第一节课,主要是学习和理解类与对象 1.面向对象 1> OOP(Object Oriented Programming)面向对象编程. 面向对象以事物为中心,完成某件事情都需要哪些事 ...
- nginx二级域名配置到文件夹
user root; worker_processes ; events { worker_connections ; } http { include mime.types; default_typ ...
- TML5如何在移动网页端调用手机图片或者camera
TML5如何在移动网页端调用手机图片或者camera可以参考这篇文章: 如果你开始基于iOS系统(ios6 above) 的web应用,可以考虑这段代码: 点击按钮,会调用你的摄像头相册 附源码文件: ...
- Android js相互调用
一.webview相当于android中的浏览器,基于webkit开发,可以浏览网页文件,支持css javas cript 以及html webview.getSettings().setJavaS ...
- jQuery中的Ajax几种请求方式
1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中. url (String) : 请求的HTML页的URL地址. data (M ...
- 理解钩子Hook以及在Thinkphp下利用钩子使用行为扩展
什么是钩子函数 个人理解:钩子就像一个”陷阱”.”监听器”,当A发送一个消息到B时,当消息还未到达目的地B时,被钩子拦截调出一部分代码做处理,这部分代码也叫钩子函数或者回调函数 参考网上说法 譬如我们 ...
- CentOS上安装RabbitMQ3.6.X
RabbitMQ3.6.1的安装方法跟以前的版本有点不一样,我在网上找了很多资料,基本都是3.1左右的版本,而且安装过程很繁琐,所以我花了一下午 的时间研究如何实现最简安装.为了让大家少走弯路,就把安 ...
- 再说memcache的multiget hole（无底洞）
关键词:multiget hole,memcache 适用于:java,php 基础知识背景: 1)multiget 是什么: multiget 指的是从 memcache(或其他分布式缓存) ...
- 获取IP（windows和linux）
#ifdef _WIN32 #include <winsock2.h> #include <Ws2tcpip.h> #pragma comment(lib,"ws2_ ...
- orcale 动态执行语句
create or replace function fn_test2(tablename in varchar2) return number is rtn number; begin --通用的获 ...