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实现
Feb 25 Javascript
JQuery删除DOM节点的方法
Jun 11 Javascript
javascript Slip.js实现整屏滑动的手机网页
Nov 25 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
Jul 22 Javascript
Html5+jQuery+CSS制作相册小记录
Dec 30 Javascript
微信JSSDK调用微信扫一扫功能的方法
Jul 25 Javascript
简单实现jQuery手风琴效果
Aug 18 jQuery
详解Vue如何支持JSX语法
Nov 10 Javascript
使用Vue实现图片上传的三种方式
Jul 17 Javascript
vuejs 制作背景淡入淡出切换动画的实例
Sep 01 Javascript
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
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中var_dump方法的使用详解
2013/06/24 PHP
PHP基于GD库的缩略图生成代码(支持jpg,gif,png格式)
2014/06/19 PHP
ThinkPHP3.1新特性之字段合法性检测详解
2014/06/19 PHP
教大家制作简单的php日历
2015/11/17 PHP
thinkphp项目部署到Linux服务器上报错“模板不存在”如何解决
2016/04/27 PHP
laravel自定义分页效果
2017/07/23 PHP
php curl获取https页面内容,不直接输出返回结果的设置方法
2019/01/15 PHP
php中访问修饰符的知识点总结
2019/01/27 PHP
一个JS的日期格式化算法示例
2013/07/31 Javascript
Javascript 运动中Offset的bug解决方案
2014/12/24 Javascript
javacript使用break内层跳出外层循环分析
2015/01/12 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
2015/10/26 Javascript
javascript入门之window对象【新手必看】
2016/11/22 Javascript
Bootstrap表单使用方法详解
2017/02/17 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
2017/04/13 Javascript
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
JS随机数产生代码分享
2018/02/24 Javascript
Vue实现搜索 和新闻列表功能简单范例
2018/03/16 Javascript
Vue.js进阶知识点总结
2018/04/01 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
2018/05/04 Javascript
原生js代码能实现call和bind吗
2019/07/31 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
使用Python判断IP地址合法性的方法实例
2014/03/13 Python
Python实现批量下载文件
2015/05/17 Python
python 3.8.3 安装配置图文教程
2020/05/21 Python
python使用布隆过滤器的实现示例
2020/08/20 Python
matplotlib常见函数之plt.rcParams、matshow的使用(坐标轴设置)
2021/01/05 Python
css3打造一款漂亮的卡哇伊按钮
2013/03/20 HTML / CSS
欧舒丹英国官网:购买欧舒丹护手霜等明星产品
2017/01/17 全球购物
英国网上购买门:Direct Doors
2018/06/07 全球购物
员工自我鉴定
2013/10/09 职场文书
简历里的自我评价范文
2014/02/24 职场文书
我为党旗添光彩演讲稿
2014/09/10 职场文书
民用住房租房协议书
2014/10/29 职场文书
2016年4月份红领巾广播稿
2015/12/21 职场文书
教你使用vscode 搭建react-native开发环境
2021/07/07 Javascript