下拉列表显示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;
}
}
}
]);

				
时间: 2024-08-15 00:40:58

下拉列表显示ng-options的相关文章

DataGridView根据下拉列表显示数据

我们都知道,DataGridView可以直接绑定数据源,显示数据库中的数据.但是我想做的是可以对他进行条件查询,根据用户级别选择不同级别的记录. 以上这个控件就是DataGridView控件,可以用它直接绑定数据源,显示数据库中表格的数据. 添加控件以后,出来一个DataGridView任务,按照步骤一步一步,就会成功绑定数据源. 绑定数据源之后会显示出来我们想要的表格,如图: 2.接下来就是添加查询了,注意查询语句不要写错. 注意我们的查询语句不能写错.查询用户级别为一般用户的就写为: SEL

ajax中网页传输(二)JSON——下拉列表显示练习

以json返回数据类型显示“民族下拉列表” 第一:body页面显示部分 <title>JSON下拉显示Nation表中的数据</title> <script src="jquery-2.0.0.min.js"></script> </head> <body> <h1>用下拉显示Nation表中的数据</h1> <select id="sel"> </se

ajax中网页传输(三)XML——下拉列表显示练习

XML:页面之间传递数据,跨平台传递 HTML:超文本标记语言,核心标签 XML的形势为 <xml version='1.0'> <Nation> <one> <code>n001</code> <name>汉族</name> </one> <two> <code>n002</code> <name>苗族</name> </two> <

DataGridView依据下拉列表显示数据

我们都知道,DataGridView能够直接绑定数据源.显示数据库中的数据.可是我想做的是能够对他进行条件查询,依据用户级别选择不同级别的记录. 以上这个控件就是DataGridView控件,能够用它直接绑定数据源.显示数据库中表格的数据. 加入控件以后,出来一个DataGridView任务,依照步骤一步一步.就会成功绑定数据源. 绑定数据源之后会显示出来我们想要的表格.如图: 2.接下来就是加入查询了,注意查询语句不要写错. 注意我们的查询语句不能写错. 查询用户级别为一般用户的就写为: SE

EasyUI combobox下拉列表实现搜索过滤(模糊匹配)

项目中的某个下拉列表长达200多个项,这么巨大的数量一个一个找眼镜都得看花,于是就得整了个搜索功能.看网上别人帖子有只能前缀匹配的方案,但只能前缀匹配的话用起来也不是很方便.于是就记录一下模糊匹配的方案. 实现效果: 这里使用的是combobox组合框,对于combobox的创建可以使用<input>输入框,也可以使用<select>下拉选.我使用的是<select>: HTML代码 <label>关联课程</label> <select

2015/10/25 用bootstrap selectpicker实现带模糊查询的下拉列表

今天的时间比较宽松,就整理一下自己这两天使用到的一个小插件功能吧,不求涉及太广,只是为了自己更好的理解. 实现功能:下拉列表显示人员列表,支持输入关键字进行模糊查询(人员列表通过数据库查询得到)1.java代码:Controller @RequestMapping(value = "list.do", method = RequestMethod.GET) public ModelAndView listUser(){ ModelAndView mav = new ModelAndVi

JS实现点击参数面板按钮显示或隐藏数据

当报表中列出数据太多时,想通过显示按钮隐藏明细数据只显示统计数据.如下图示例,那么该如何实现呢?本文以FineReport为例,来讲述JS如何实现点击参数面板按钮显示或隐藏数据. 打开报表 在参数面板添加一个标签控件,控件名为lable,设置标签控件不可见,控件值为"显示". 在参数面板添加一个按钮控件,控件名为button,控件值为"只显示合计数据",并添加点击事件. 编辑点击事件,添加下面的JavaScript代码: /*获取隐藏的标签控件的值*/ var la

自定义下拉列表控件

问题及需求 输入汉字或全拼或简拼均可得到结果(此需求用原生的ComboBox不容易实现) 点击文本框时弹出下拉列表 进入文本框时弹出下拉列表 输入文字时,如果有结果,则弹出下拉列表 除文本框和下拉列表外,点击任何地方均隐藏下拉列表 单击下拉列表中的文字,文本出现在文本框,关闭下拉列表 下拉列表出现后,默认选中第一项,第一项高亮 回车后下拉列表中选中的文本出现在文本框中 2.解决思路 用Panel作为容器,装载ListView,作为下拉列表的数据容器 定义下拉列表显示方法,并使用+=将其添加到文本

asp.net mvc 添加下拉列表

新手刚学mvc controller中: public ActionResult Index(string namelist) { var list = new List<string>(); var listQry = from d in db.Movies orderby d.name select d.name; list.AddRange(listQry.Distinct()); ViewBag.namelist = new SelectList(list); var movies =