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 相关文章推荐
网页常用特效代码整理
Jun 23 Javascript
js静态作用域的功能。
Dec 25 Javascript
用JQuery 实现的自定义对话框
Mar 24 Javascript
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
May 21 Javascript
javascript温习的一些笔记 基础常用知识小结
Jun 22 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
Aug 24 Javascript
js使用cookie记录用户名的方法
Nov 26 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
Apr 05 Javascript
常用Javascript函数与原型功能收藏(必看篇)
Oct 09 Javascript
详解Vue底部导航栏组件
May 02 Javascript
vue自动化路由的实现代码
Sep 30 Javascript
在antd中setFieldsValue和defaultVal的用法
Oct 29 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编程获取图片的主色调的方法【基于Imagick扩展】
2017/08/02 PHP
PHP创建XML接口示例
2019/07/04 PHP
基于PHP实现用户在线状态检测
2020/11/10 PHP
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
JavaScript 继承详解(二)
2009/07/13 Javascript
Jquery 学习笔记(一)
2009/10/13 Javascript
使用javascript过滤html的字符串(注释标记法)
2013/07/08 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
2014/03/10 Javascript
js处理表格对table进行修饰
2014/05/26 Javascript
使用Node.js为其他程序编写扩展的基本方法
2015/06/23 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
2016/08/06 Javascript
vue实现2048小游戏功能思路详解
2018/05/09 Javascript
vue组件横向树实现代码
2018/08/02 Javascript
Vue+element-ui 实现表格的分页功能示例
2018/08/18 Javascript
webpack打包非模块化js的方法
2018/10/24 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
2019/09/27 Javascript
jQuery 查找元素操作实例小结
2019/10/02 jQuery
react使用CSS实现react动画功能示例
2020/05/18 Javascript
Vue select 绑定动态变量的实例讲解
2020/10/22 Javascript
vue实现验证用户名是否可用
2021/01/20 Vue.js
[05:26]TI10典藏宝瓶套装外观展示
2020/07/03 DOTA
Python单链表的简单实现方法
2014/09/23 Python
python global和nonlocal用法解析
2020/02/03 Python
python代码xml转txt实例
2020/03/10 Python
使用Pycharm(Python工具)新建项目及创建Python文件的教程
2020/04/26 Python
html5+css3之动画在webapp中的应用
2014/11/21 HTML / CSS
玩具反斗城天猫官方旗舰店:享誉全球的玩具店
2017/10/10 全球购物
Shoes For Crews法国官网:美国领先的防滑鞋设计和制造商
2018/01/01 全球购物
澳洲的服装老品牌:SABA
2018/02/06 全球购物
怎样比较两个类型为String的字符串
2016/08/17 面试题
SQL数据库笔试题
2016/03/08 面试题
个人三严三实对照检查材料
2014/09/25 职场文书
2014基建处领导班子“四风”对照检查材料思想汇报
2014/10/04 职场文书
恋恋笔记本观后感
2015/06/16 职场文书
深入浅析python3 依赖倒置原则(示例代码)
2021/07/09 Python
Golang 对es的操作实例
2022/04/20 Golang