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 相关文章推荐
firefox插件Firebug的使用教程
Jan 02 Javascript
jquery下异步提交表单 异步跨域提交表单
Nov 17 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
Dec 25 Javascript
特殊情况下如何获取span里面的值
May 20 Javascript
JQuery 控制内容长度超出规定长度显示省略号
May 23 Javascript
JavaScript 对象深入学习总结(经典)
Sep 29 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
Nov 23 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
Dec 02 Javascript
js实现动态显示时间效果
Mar 06 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
Aug 17 Javascript
了解在JavaScript中将值转换为字符串的5种方法
Jun 06 Javascript
Vue路由之JWT身份认证的实现方法
Aug 26 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_MySQL教程-第一天
2007/03/18 PHP
PHP 转义使用详解
2013/07/15 PHP
PHP实现克鲁斯卡尔算法实例解析
2014/08/22 PHP
详解关于php的xdebug配置(编辑器vscode)
2019/01/29 PHP
浅谈PHPANALYSIS提取关键字
2019/03/08 PHP
Javascript this关键字使用分析
2008/10/21 Javascript
JavaScript高级程序设计 阅读笔记(二十) js错误处理
2012/08/14 Javascript
jQuery中实现动画效果的基本操作介绍
2013/04/16 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
2013/11/12 Javascript
JQuery异步加载无限下拉框级联功能实现示例
2014/02/19 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
2015/11/23 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
2017/01/04 Javascript
js输入框使用正则表达式校验输入内容的实例
2017/02/12 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
2017/04/04 jQuery
seajs下require书写约定实例分析
2018/05/16 Javascript
微信小程序实现日历功能
2018/11/27 Javascript
vue-router路由懒加载及实现的3种方式
2021/02/28 Vue.js
Python中正则表达式的用法实例汇总
2014/08/18 Python
python使用openpyxl库修改excel表格数据方法
2018/05/03 Python
python中的print()输出
2019/04/12 Python
24式加速你的Python(小结)
2019/06/13 Python
Python 根据数据模板创建shapefile的实现
2019/11/26 Python
Python 从attribute到property详解
2020/03/05 Python
使用pymysql查询数据库,把结果保存为列表并获取指定元素下标实例
2020/05/15 Python
微信html5页面调用第三方位置导航的示例
2018/03/14 HTML / CSS
出门问问全球官方商城:Tichome音箱和TicWatch智能手表
2017/12/02 全球购物
饿了么订餐官网:外卖、网上订餐
2019/06/28 全球购物
室内设计专业个人的自我评价
2013/12/18 职场文书
军训考核自我鉴定
2014/02/13 职场文书
党员2014两会学习心得体会
2014/03/17 职场文书
股东协议书
2014/04/14 职场文书
施工安全责任书
2014/04/14 职场文书
四风问题对照检查材料整改措施
2014/09/27 职场文书
铣工实训报告
2014/11/05 职场文书
入党政审材料范文
2014/12/24 职场文书
单位提档介绍信
2015/10/22 职场文书