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 相关文章推荐
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
Jan 02 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
Dec 03 Javascript
浅谈js中同名函数和同名变量的执行问题
Feb 12 Javascript
纯js实现画一棵树的示例
Sep 05 Javascript
学习JS中的DOM节点以及操作
Apr 30 Javascript
JS在if中的强制类型转换方式
Jul 15 Javascript
Vue.js图片预览插件使用详解
Aug 27 Javascript
解决layui 三级联动下拉框更新时回显的问题
Sep 03 Javascript
vue实现计步器功能
Nov 01 Javascript
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
javascript设计模式 ? 建造者模式原理与应用实例分析
Apr 10 Javascript
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
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
为查询结果建立向后/向前按钮
2006/10/09 PHP
php基于mcrypt的加密解密实例
2014/10/27 PHP
php检查字符串中是否包含7位GSM字符的方法
2015/03/17 PHP
php通过smtp邮件验证登陆的方法
2016/05/11 PHP
PHP实现中国公民身份证号码有效性验证示例代码
2017/05/03 PHP
php模仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(中)
2017/06/11 PHP
基于jQuery制作迷你背词汇工具
2010/07/27 Javascript
JavaScript中清空数组的三种方法分享
2011/04/07 Javascript
JavaScript的Module模式编程深入分析
2013/08/13 Javascript
innerText 使用示例
2014/01/23 Javascript
javascript元素动态创建实现方法
2015/05/13 Javascript
两种JS实现屏蔽鼠标右键的方法
2020/08/20 Javascript
基于javascript实现最简单的选项卡切换效果
2016/05/16 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
2016/07/20 Javascript
jQuery实现自动输入email、时间和域名的方法
2016/08/24 Javascript
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
基于zepto.js实现手机相册功能
2017/07/11 Javascript
基于JSONP原理解析(推荐)
2017/12/04 Javascript
vue slot 在子组件中显示父组件传递的模板
2018/03/02 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
2020/05/28 Javascript
基于javascript实现碰撞检测
2020/03/12 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
2020/04/15 Javascript
Python对象中__del__方法起作用的条件详解
2018/11/01 Python
Python 内置函数globals()和locals()对比详解
2019/12/23 Python
django model 条件过滤 queryset.filter(**condtions)用法详解
2020/05/20 Python
使用python修改文件并立即写回到原始位置操作(inplace读写)
2020/06/28 Python
详解anaconda安装步骤
2020/11/23 Python
分享CSS3中必须要知道的10个顶级命令
2012/04/26 HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
2014/06/23 HTML / CSS
HTML5 audio标签使用js进行播放控制实例
2015/04/24 HTML / CSS
南威尔士家居商店:Leekes
2016/10/25 全球购物
英国独特的时尚和生活方式品牌:JOY
2018/03/17 全球购物
FLOS美国官网:意大利高级照明工艺的传奇
2018/08/07 全球购物
俄罗斯最大的在线手表商店:Bestwatch.ru
2020/01/11 全球购物
大学生应聘推荐信范文
2013/11/19 职场文书
一份婚庆公司创业计划书
2014/01/11 职场文书