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 相关文章推荐
juqery 学习之六 CSS--css、位置、宽高
Feb 11 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
Jun 05 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
Apr 06 Javascript
Angularjs制作简单的路由功能demo
Apr 14 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
May 16 Javascript
利用React-router+Webpack快速构建react程序
Oct 27 Javascript
关于Javascript中document.cookie的使用
Mar 08 Javascript
JavaScript实现两个select下拉框选项左移右移
Mar 09 Javascript
详解使用nvm管理多版本node的方法
Aug 30 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
Aug 23 Javascript
微信小程序在text文本实现多种字体样式
Nov 08 Javascript
javascript 原型与原型链的理解及实例分析
Nov 23 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实现文件上传二法
2006/10/09 PHP
PHP4实际应用经验篇(4)
2006/10/09 PHP
APMServ使用说明
2006/10/23 PHP
php MySQL与分页效率
2008/06/04 PHP
PHP生成指定随机字符串的简单实现方法
2015/04/01 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
JS+CSS设置img在DIV中只显示Img垂直居中的部分
2013/10/24 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
2014/03/27 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
基于jQuery创建鼠标悬停效果的方法
2015/03/07 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
2016/05/25 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
2016/07/05 Javascript
underscore之function_动力节点Java学院整理
2017/07/11 Javascript
浅谈通过JS拦截 pushState和replaceState事件
2017/07/21 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
2018/08/31 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
2018/10/08 Javascript
express+vue+mongodb+session 实现注册登录功能
2018/12/06 Javascript
js实现右键弹出自定义菜单
2020/09/08 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
2020/09/21 Javascript
Pyhthon中使用compileall模块编译源文件为pyc文件
2015/04/28 Python
python中将函数赋值给变量时需要注意的一些问题
2017/08/18 Python
python 3.6.5 安装配置方法图文教程
2018/09/18 Python
python生成器与迭代器详解
2019/01/01 Python
Python3enumrate和range对比及示例详解
2019/07/13 Python
Python 50行爬虫抓取并处理图灵书目过程详解
2019/09/20 Python
css3 2D图片转动样式可以扩充到Js当中
2014/04/29 HTML / CSS
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
2020/02/27 HTML / CSS
澳大利亚实惠时尚女装商店:Katies
2019/06/16 全球购物
俄罗斯苹果优质经销商商店:iPort
2020/05/27 全球购物
Kappa英国官方在线商店:服装和运动器材
2020/11/22 全球购物
物流专业大学生求职信范文
2013/10/28 职场文书
大学四年职业生涯规划书范文
2014/01/02 职场文书
党的群众路线教育实践活动个人对照检查材料(教师)
2014/11/04 职场文书
2015年公路养护工作总结
2015/05/13 职场文书
2019求职信:应届生求职信范文
2019/04/24 职场文书
python区块链实现简版工作量证明
2022/05/25 Python