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 相关文章推荐
网页开发中的容易忽略的问题 javascript HTML中的table
Apr 15 Javascript
javascript获取当前ip的代码
May 10 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
Nov 11 Javascript
JS实现两个大数(整数)相乘
Apr 28 Javascript
jQuery元素的隐藏与显示实例
Jan 20 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
Jan 06 Javascript
JS for...in 遍历语句用法实例分析
Aug 24 Javascript
JS如何设置元素样式的方法示例
Aug 28 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
Feb 05 Javascript
微信小程序form表单组件示例代码
Jul 15 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
Jun 16 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 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函数
2006/10/09 PHP
PHP 写文本日志实现代码
2010/05/18 PHP
PHP编程函数安全篇
2013/01/08 PHP
php数组合并与拆分实例分析
2015/06/12 PHP
PHP filter_var() 函数, 验证判断EMAIL,URL等
2021/03/09 PHP
一个简单的javascript类定义例子
2009/09/12 Javascript
javascript的onchange事件与jQuery的change()方法比较
2009/09/28 Javascript
怎么判断js脚本加载完成
2014/02/28 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
2014/09/02 Javascript
JavaScript中的类数组对象介绍
2014/12/30 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
2015/04/22 Javascript
JS中cookie的使用及缺点讲解
2017/05/13 Javascript
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
跨域请求两种方法 jsonp和cors的实现
2018/11/11 Javascript
Jquery高级应用Deferred对象原理及使用实例
2020/05/28 jQuery
vue-router为激活的路由设置样式操作
2020/07/18 Javascript
ubuntu系统下 python链接mysql数据库的方法
2017/01/09 Python
python Flask 装饰器顺序问题解决
2018/08/08 Python
tensorflow实现加载mnist数据集
2018/09/08 Python
对python的bytes类型数据split分割切片方法
2018/12/04 Python
python中列表的切片与修改知识点总结
2019/07/23 Python
python mqtt 客户端的实现代码实例
2019/09/25 Python
PyTorch的SoftMax交叉熵损失和梯度用法
2020/01/15 Python
Python requests.post方法中data与json参数区别详解
2020/04/30 Python
带你学习Python如何实现回归树模型
2020/07/16 Python
CSS3不透明度实例讲解
2016/04/26 HTML / CSS
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
英语师范专业毕业生自荐信
2013/09/21 职场文书
通息工程毕业生自荐信
2013/10/16 职场文书
有个性的自我评价范文
2013/11/15 职场文书
团队精神演讲稿
2013/12/31 职场文书
警校毕业生自我评价
2014/04/06 职场文书
文明单位申报材料
2014/12/23 职场文书
文书工作总结(范文)
2019/07/11 职场文书
zabbix监控mysql的实例方法
2021/06/02 MySQL
python playwrigh框架入门安装使用
2022/07/23 Python