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 相关文章推荐
jQuery1.6 使用方法一
Nov 23 Javascript
jquery星级插件、支持页面中多次使用
Mar 25 Javascript
JavaScript修改css样式style动态改变元素样式
Dec 16 Javascript
JavaScript学习笔记之Function对象
Jan 22 Javascript
AngularJS实现元素显示和隐藏的几个案例
Dec 09 Javascript
Ajax 加载数据 练习代码
Jan 05 Javascript
js实现自定义路由
Feb 04 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
Mar 21 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
Apr 04 Javascript
vue使用pdfjs显示PDF可复制的实现方法
Dec 14 Javascript
Vue实现类似Spring官网图片滑动效果方法
Mar 01 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
Apr 13 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
smarty的保留变量问题
2008/10/23 PHP
php标签云的实现代码
2012/10/10 PHP
PHP分页类集锦
2014/11/18 PHP
利用ajax和PHP实现简单的流程管理
2017/03/23 PHP
jquery 实现的全选和反选
2009/04/15 Javascript
JavaScript 学习笔记(五)
2009/12/31 Javascript
js png图片(有含有透明)在IE6中为什么不透明了
2010/02/07 Javascript
Jquery知识点二 jquery下对数组的操作
2011/01/15 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
2013/04/21 Javascript
js怎么终止程序return不行换jfslk
2013/05/30 Javascript
jquery 面包屑导航 具体实现
2013/06/05 Javascript
jquery放大镜效果超漂亮噢
2013/11/15 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
2014/04/15 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
2015/07/10 Javascript
JavaScript如何禁止Backspace键
2015/12/02 Javascript
JS与jQ读取xml文件的方法
2015/12/08 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
2016/04/03 Javascript
浅谈jquery拼接字符串效率比较高的方法
2017/02/22 Javascript
js链表操作(实例讲解)
2017/08/29 Javascript
jQuery封装animate.css的实例
2018/01/04 jQuery
fetch 如何实现请求数据
2018/12/20 Javascript
Python里隐藏的“禅”
2014/06/16 Python
Python编程中实现迭代器的一些技巧小结
2016/06/21 Python
python交互界面的退出方法
2019/02/16 Python
tensorflow对图像进行拼接的例子
2020/02/05 Python
使用Python matplotlib作图时,设置横纵坐标轴数值以百分比(%)显示
2020/05/16 Python
世界上最大的在线旅行社新加坡网站:Expedia新加坡
2016/08/25 全球购物
TobyDeals美国:在电子产品上获得最好的优惠和折扣
2019/08/11 全球购物
两只小狮子教学反思
2014/02/05 职场文书
补充协议书范本
2014/04/23 职场文书
2014年党员自我剖析材料
2014/10/07 职场文书
六查六看六改心得体会
2014/10/14 职场文书
个人工作违纪检讨书
2015/05/05 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书
SpringRetry重试框架的具体使用
2021/07/25 Java/Android
CentOS下安装Jenkins的完整步骤
2022/04/07 Servers