angularjs 动态从后台获取下拉框的值方法


Posted in Javascript onAugust 13, 2018

angularjs 动态从后台获取下拉框的值,只要是使用repeat指令,后台提供的是一个list的对象,里面包含value和显示的值,如下:

js文件:

//职务等级和档次/军衔等级和档次,需要从后台获取:poslist,type:2/3/4/5
 $scope.getDyActivityInforItems=function(){
 serviceData.getData('inforinput/getAllSelectValueByType','POST',{
 type:2 
 }).then(function(json){
 if(json.code==0){
  $scope.poslist=json.content;
 };
 }, function(json){
 console.log(json);
 });
 };

界面:

<!-- 空格空开来区分职务等级 -->
<div class="item" style="border-top: 1px solid #ddd;padding-top: 2px;">
<label class="list_tit">职务等级</label>
<div class="item_input" ng-init="getDyActivityInforItems()">
 <!-- <select class="fillIn select-able" ng-model="item" ng-options="item as y for y in addInfo.posList" id="dutLevel_view_1" name="dutLevel">
       </select> -->
       
       
       <select class="fillIn select-able" ng-model="selectedPos" id="dutLevel_view_1" name="dutLevel">
       <option ng-repeat="x in poslist" value="{{x.select_code}}">{{x.select_name}}</option>
       </select>
       
       <span class="imp_list_rema">*</span>


<!-- 
<select class="fillIn select-able" ng-model="addInfo.addInfoView.positionRank" >
<option value="" selected>请选择</option>
</select> -->

</div>
</div>

===============分割线,2017年7月20日17:07:14-============

后面遇到一个问题,当新增了一个下拉选项,需要刷新了下拉的list,但就会默认显示第一个,没有获取刚开始显示界面的值,需要使用apply进行更新:

addInfo.addInfoView.positionRank=0;
						$scope.poslist=json.content;
						setTimeout(function() { 
					   $scope.$apply(function() { 
					  	 addInfo.addInfoView.positionRank=yuanPos;
					   }); 
					 }, 1000);

html上:

<!-- 空格空开来区分职务等级 -->
				<div class="item" style="border-top: 1px solid #ddd;padding-top: 2px;">
					<label class="list_tit">职务等级</label>
					<div class="item_input" ng-init="getPosMilSelectValue()">
       <select class="fillIn select-able" ng-selected="addInfo.addInfoView.positionRank" ng-model="addInfo.addInfoView.positionRank" id="dutLevel_view_1" name="dutLevel">
       <option ng-repeat="x in poslist" value="{{x.select_code}}">{{x.select_name}}</option>
       </select>
       <span class="imp_list_rema">*</span>
       <span style="background:#3cb671;margin-left:20px;height:17px;width:20px" ng-click="addInfo.viewInput_add_item=!addInfo.viewInput_add_item;addInfo.addItemName='';selectType=2">
       <a style="margin-left:7px;margin-top:2px" href="javascript:;" rel="external nofollow" title=""> + </a></span>
					</div>
				</div>

以上这篇angularjs 动态从后台获取下拉框的值方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype Class对象学习
Jul 19 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
Nov 19 Javascript
JS分页效果示例
Oct 11 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
Apr 29 Javascript
AngularJS初始化过程分析(引导程序)
Dec 06 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
Dec 14 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
Jan 04 Javascript
JavaScript下拉菜单功能实例代码
Mar 01 Javascript
轻松理解vue的双向数据绑定问题
Oct 30 Javascript
VSCode 配置React Native开发环境的方法
Dec 27 Javascript
微信小程序下拉菜单效果的实例代码
May 14 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
Sep 02 Javascript
vue2.0 中使用transition实现动画效果使用心得
Aug 13 #Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
Aug 13 #Javascript
jQuery实现图片简单轮播功能示例
Aug 13 #jQuery
vue.js 实现评价五角星组件的实例代码
Aug 13 #Javascript
Vue.js实现数据响应的方法
Aug 13 #Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 #jQuery
Bootstrap Table实现定时刷新数据的方法
Aug 13 #Javascript
You might like
PHP测试程序运行时间的类
2012/02/05 PHP
请离开include_once和require_once
2013/07/18 PHP
分享php分页的功能模块
2015/06/16 PHP
php防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
thinkphp实现把数据库中的列的值存到下拉框中的方法
2017/01/20 PHP
类似框架的js代码
2006/11/09 Javascript
javascript 禁止复制网页
2009/06/11 Javascript
js控制滚动条缓慢滚动到顶部实现代码
2013/03/20 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
2013/08/29 Javascript
js综合应用实例简单的表格统计
2013/09/03 Javascript
Javascript高级技巧分享
2014/02/25 Javascript
Jquery方式获取iframe页面中的 Dom元素
2014/05/07 Javascript
JavaScript实现梯形乘法表的方法
2015/04/25 Javascript
基于jQuery实现的扇形定时器附源码下载
2015/10/20 Javascript
AngularJS 最常用的功能汇总
2016/02/17 Javascript
JS验证字符串功能
2017/02/22 Javascript
js实现旋转木马效果
2017/03/17 Javascript
NodeJs模拟登陆正方教务
2017/04/28 NodeJs
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
2017/05/12 Javascript
实现一个完整的Node.js RESTful API的示例
2017/09/29 Javascript
vue实现将一个数组内的相同数据进行合并
2019/11/07 Javascript
TypeScript魔法堂之枚举的超实用手册
2020/10/29 Javascript
[55:35]VGJ.S vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python实现数通设备端口使用情况监控实例
2015/07/15 Python
深入浅析python定时杀进程
2016/06/06 Python
浅谈python socket函数中,send与sendall的区别与使用方法
2017/05/09 Python
Python常用内置模块之xml模块(详解)
2017/05/23 Python
Python加密方法小结【md5,base64,sha1】
2017/07/13 Python
Python浅复制中对象生存周期实例分析
2018/04/02 Python
python matlibplot绘制3D图形
2018/07/02 Python
Python数据类型之List列表实例详解
2019/05/08 Python
python如何求数组连续最大和的示例代码
2020/02/04 Python
接口自动化多层嵌套json数据处理代码实例
2020/11/20 Python
详解Python爬虫爬取博客园问题列表所有的问题
2021/01/18 Python
台湾专柜女包:KINAZ
2019/12/26 全球购物
2014小学年度工作总结
2014/12/20 职场文书