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 使用手册(七)
Sep 23 Javascript
js防止表单重复提交实现代码
Sep 05 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
Jan 22 Javascript
上传图片js判断图片尺寸和格式兼容IE
Sep 01 Javascript
JS动态改变表格边框宽度的方法
Mar 31 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
Aug 24 Javascript
js Dom实现换肤效果
Oct 21 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
Mar 18 Javascript
vue 弹框产生的滚动穿透问题的解决
Sep 21 Javascript
微信小程序tabbar底部导航
Nov 05 Javascript
JS实现求5的阶乘示例
Jan 21 Javascript
vue+element+Java实现批量删除功能
Apr 08 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
将博客园(cnblogs.com)数据导入到wordpress的代码
2013/01/06 PHP
基于PHP创建Cookie数组的详解
2013/07/03 PHP
laravel配置Redis多个库的实现方法
2019/04/10 PHP
理解Javascript_09_Function与Object
2010/10/16 Javascript
javascript闭包传参和事件的循环绑定示例探讨
2014/04/17 Javascript
js实现div在页面拖动效果
2016/05/04 Javascript
微信小程序 教程之引用
2016/10/18 Javascript
拖动时防止选中
2017/02/03 Javascript
vue如何从接口请求数据
2017/06/22 Javascript
Node调用Java的示例代码
2017/09/20 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
2018/01/04 Javascript
移动端如何用下拉刷新的方式实现上拉加载
2018/12/10 Javascript
微信小程序实现禁止分享代码实例
2019/10/19 Javascript
Vue事件处理原理及过程详解
2020/03/11 Javascript
[45:46]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS DT
2014/05/23 DOTA
[01:06:30]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第二场 1月9日
2021/03/11 DOTA
为python设置socket代理的方法
2015/01/14 Python
教大家使用Python SqlAlchemy
2016/02/12 Python
Flask框架信号用法实例分析
2018/07/24 Python
对Python发送带header的http请求方法详解
2019/01/02 Python
Python数据库小程序源代码
2019/09/15 Python
使用Python的turtle模块画国旗
2019/09/24 Python
pytorch 利用lstm做mnist手写数字识别分类的实例
2020/01/10 Python
Python使用xpath实现图片爬取
2020/09/16 Python
CSS3标注引用的出处和来源的方法
2020/02/25 HTML / CSS
Monnier Frères美国官网:法国知名奢侈品网站
2016/11/22 全球购物
应聘编辑职位自荐信范文
2014/01/05 职场文书
节能环保口号
2014/06/12 职场文书
大学生活动总结模板
2014/07/02 职场文书
大学毕业生管理学求职信
2014/09/01 职场文书
旷工检讨书1000字
2015/01/01 职场文书
2015年人力资源工作总结
2015/04/08 职场文书
借条如何写
2015/05/26 职场文书
论语读书笔记
2015/06/26 职场文书
高一英语教学反思
2016/03/03 职场文书
解决Pytorch中关于model.eval的问题
2021/05/22 Python