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 相关文章推荐
用html+css+js实现的一个简单的图片切换特效
May 28 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
Jun 23 Javascript
jquery插件方式实现table查询功能的简单实例
Jun 06 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
Aug 11 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
Dec 22 Javascript
jQuery按需加载轮播图(web前端性能优化)
Feb 17 Javascript
微信小程序 空白页重定向解决办法
Jun 27 Javascript
vue微信分享的实现(在当前页面分享其他页面)
Apr 16 Javascript
JS实现获取当前所在周的周六、周日示例分析
May 11 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
Jul 11 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
Aug 20 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
Nov 11 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常见的6个错误提示及解决方法
2016/07/07 PHP
Yii CGridView用法实例详解
2016/07/12 PHP
PHP实现的curl批量请求操作示例
2018/06/06 PHP
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
2010/04/14 Javascript
jquery 删除cookie失效的解决方法
2013/11/12 Javascript
对于Form表单reset方法的新认识
2014/03/05 Javascript
jQuery Validate插件实现表单强大的验证功能
2015/12/18 Javascript
javascript实现平滑无缝滚动
2020/08/09 Javascript
js仿手机页面文件下拉刷新效果
2016/10/14 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
移动端使用localResizeIMG4压缩图片
2017/04/22 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
2017/05/13 jQuery
详解vue 计算属性与方法跟侦听器区别(面试考点)
2018/04/23 Javascript
微信小程序页面缩放式侧滑效果的实现代码
2018/11/15 Javascript
vue中引入第三方字体文件的方法示例
2018/12/17 Javascript
vue学习笔记之Vue中css动画原理简单示例
2020/02/29 Javascript
JS实现瀑布流效果
2020/03/07 Javascript
vue-router懒加载的3种方式汇总
2021/02/28 Vue.js
[02:22]完美世界DOTA2联赛PWL S3 集锦第一期
2020/12/15 DOTA
linux系统使用python监测网络接口获取网络的输入输出
2014/01/15 Python
Flask入门教程实例:搭建一个静态博客
2015/03/27 Python
Python实现批量执行同目录下的py文件方法
2019/01/11 Python
Flask配置Cors跨域的实现
2019/07/12 Python
python中的global关键字的使用方法
2019/08/20 Python
django框架基于queryset和双下划线的跨表查询操作详解
2019/12/11 Python
Python3基本输入与输出操作实例分析
2020/02/14 Python
解决导入django_filters不成功问题No module named 'django_filter'
2020/07/15 Python
Python使用socket模块实现简单tcp通信
2020/08/18 Python
python 密码学示例——凯撒密码的实现
2020/09/21 Python
python 使用三引号时容易犯的小错误
2020/10/21 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
英国门把手公司:Door Handle Company
2019/05/12 全球购物
怎样填写就业意向
2014/04/02 职场文书
企业法人授权委托书范本
2014/09/23 职场文书
党的群众路线教育实践活动个人整改措施材料
2014/11/04 职场文书
MySQL查询日期时间
2022/05/15 MySQL