Angular中ng-options下拉数据默认值的设定方法


Posted in Javascript onJune 21, 2017

今天学习了一下Angular中ng-options下拉数据默认值的设定方法,留个笔记

直接上代码

<div class="form-group">
        <label class="col-sm-2 control-label">教师</label>
             <div class="col-sm-10">
              <select style="display:block;
                  width:100%;
                  height:34px;
                  padding:6px 12px;
                  font-size:14px;
                  line-height:1.4;
                  border-radius:4px;
                  border:1px solid #ccc;
                  color:#555; "
                  ng-model="editCourse.TeacherName"
                  ng-options="Teacher.UserName for Teacher in TeacherList" required>
                <option value="">选择教师</option>
               </select>
             </div>
      </div>

AngularJS

//data为课程的编号ID
   $scope.Edit = function (data) {
      //通过课程ID获取课程对象
      CourseService.getByCourseID(data).then(function (result) {
        $scope.editCourse = result.data;
        //默认值设定
        //先通过课程里面的教师ID获取教师对象
        CourseService.GetTeacherByTeacherID(result.data.TeacherID).then(function (result) {
         //$scope.TeacherList为所有教师的列表
          for (i = 0; i < $scope.TeacherList.length; i++) {
            //如果当前课程教师的ID与当前遍历到的教师的ID相等的话就把当前遍历到的这个教师的对象给到 ng-model="editCourse.TeacherName"
            if (result.data.UserID == $scope.TeacherList[i].UserID) {
              $scope.editCourse.TeacherName = $scope.TeacherList[i];
            }
          }
        });
        angular.element("#edit").modal({
          show: true
        })
      })
    }

演示

Angular中ng-options下拉数据默认值的设定方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 模式设计之工厂模式详细说明
May 10 Javascript
jQuery中setTimeout的几种使用方法小结
Apr 07 Javascript
使用jQuery避免鼠标双击的解决方案
Aug 21 Javascript
Jquery中offset()和position()的区别分析
Feb 05 Javascript
Node.js编程中客户端Session的使用详解
Jun 23 Javascript
js实现继承的5种方式
Dec 01 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
Oct 03 Javascript
深入理解JS继承和原型链的问题
Dec 17 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
Jan 19 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
Mar 04 Javascript
浅谈node中的cluster集群
Jun 02 Javascript
vue-video-player 断点续播的实现
Feb 01 Vue.js
基于jquery日历价格、库存等设置插件
Jul 05 #jQuery
详解Angular 自定义结构指令
Jun 21 #Javascript
详解Angular2 之 结构型指令
Jun 21 #Javascript
JavaScript用200行代码制作打飞机小游戏实例
Jun 21 #Javascript
Angular.JS中指令ng-if的注意事项小结
Jun 21 #Javascript
jquery.validate表单验证插件使用详解
Jun 21 #jQuery
JS实现简单拖拽效果
Jun 21 #Javascript
You might like
PHP对象Object的概念 介绍
2012/06/14 PHP
Node.js的特点和应用场景介绍
2014/11/04 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
jQuery实现的漂亮表单效果代码
2015/08/18 Javascript
基于jQuery实现网页打印功能
2015/12/01 Javascript
javascirpt实现2个iframe之间传值的方法
2016/06/30 Javascript
javascript添加前置0(补零)的几种方法
2017/01/05 Javascript
jquery 判断是否支持Placeholder属性的方法
2017/02/07 Javascript
jQuery模拟窗口抖动效果
2017/03/15 Javascript
JavaScript 异步调用
2017/10/25 Javascript
jquery实现侧边栏左右伸缩效果的示例
2017/12/19 jQuery
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
2019/02/20 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
2019/04/04 jQuery
微信小程序点击滚动到指定位置的实现
2020/05/22 Javascript
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
Python+微信接口实现运维报警
2016/08/27 Python
Django + Uwsgi + Nginx 实现生产环境部署的方法
2018/06/20 Python
python redis 删除key脚本的实例
2019/02/19 Python
PyTorch的深度学习入门教程之构建神经网络
2019/06/27 Python
Django基础知识 web框架的本质详解
2019/07/18 Python
python正则表达式匹配不包含某几个字符的字符串方法
2019/07/23 Python
Python八皇后问题解答过程详解
2019/07/29 Python
详解基于python-django框架的支付宝支付案例
2019/09/23 Python
Python pip 安装与使用(安装、更新、删除)
2019/10/06 Python
python 如何停止一个死循环的线程
2020/11/24 Python
pytorch 中forward 的用法与解释说明
2021/02/26 Python
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
2020/03/18 HTML / CSS
美国知名的家庭连锁百货商店:Boscov’s
2017/07/27 全球购物
美国林业供应商:Forestry Suppliers
2019/05/01 全球购物
幼儿园中班开学寄语
2014/04/03 职场文书
教研活动总结
2014/04/28 职场文书
党建工作先进材料
2014/05/02 职场文书
2015年设计师个人工作总结
2015/04/25 职场文书
2015年度质量工作总结报告
2015/04/27 职场文书
导游词之河北野三坡
2019/12/11 职场文书