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 相关文章推荐
用Mootools获得操作索引的两种方法分享
Dec 12 Javascript
Javascript绝句欣赏 一些经典的js代码
Feb 22 Javascript
javascript事件冒泡详解和捕获、阻止方法
Apr 12 Javascript
jQuery实现的Div窗口震动特效
Jun 09 Javascript
详解JavaScript函数对象
Nov 15 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
Aug 18 Javascript
javascript 正则表达式分组、断言详解
Apr 20 Javascript
使用JS代码实现俄罗斯方块游戏
Aug 03 Javascript
在vue中给列表中的奇数行添加class的实现方法
Sep 05 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
Jun 24 Javascript
ES6 Promise对象的应用实例分析
Jun 27 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
Nov 07 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如何编写易读的代码
2007/07/10 PHP
网页游戏开发入门教程二(游戏模式+系统)
2009/11/02 PHP
Laravel实现用户注册和登录
2015/01/23 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
Javascript中的Split使用方法与技巧
2007/03/09 Javascript
javascript获得服务器端控件的ID的实现代码
2011/12/28 Javascript
eval的两组性能测试数据
2012/08/17 Javascript
IE浏览器中图片onload事件无效的解决方法
2014/04/29 Javascript
轻松创建nodejs服务器(4):路由
2014/12/18 NodeJs
jQuery中change事件用法实例
2014/12/26 Javascript
JavaScript数据结构和算法之二叉树详解
2015/02/11 Javascript
JavaScript通过字符串调用函数的实现方法
2015/03/18 Javascript
tuzhu_req.js 实现仿百度图片首页效果
2015/08/11 Javascript
不想让浏览器运行javascript脚本的方法
2015/11/20 Javascript
js中遍历对象的属性和值的方法
2016/07/27 Javascript
BootStrap3中模态对话框的使用
2017/01/06 Javascript
Vue.js实现一个todo-list的上移下移删除功能
2017/06/26 Javascript
微信小程序form表单组件示例代码
2018/07/15 Javascript
bootstrap动态调用select下拉框的实例代码
2018/08/09 Javascript
你或许不知道的一些npm实用技巧
2019/07/04 Javascript
vue开发拖拽进度条滑动组件
2019/09/21 Javascript
在ironpython中利用装饰器执行SQL操作的例子
2015/05/02 Python
利用Python脚本实现ping百度和google的方法
2017/01/24 Python
python使用python-pptx删除ppt某页实例
2020/02/14 Python
python 实现端口扫描工具
2020/12/18 Python
英国、欧洲和全球租车服务:Avis英国
2016/08/29 全球购物
法国发饰品牌:Alexandre De Paris
2018/12/04 全球购物
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
Happy Socks英国官网:购买五颜六色的袜子
2020/11/03 全球购物
C#中类(class)与结构(struct)的异同
2013/11/03 面试题
servlet面试题
2012/08/20 面试题
网站编辑求职信
2013/10/17 职场文书
自我鉴定写作要点
2014/01/17 职场文书
党支部意见范文
2015/06/02 职场文书
开发一个封装iframe的vue组件
2021/03/29 Vue.js