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 相关文章推荐
网页设计常用的一些技巧
Dec 22 Javascript
js 静态动态成员 and 信息的封装和隐藏
May 29 Javascript
jquery实现的省市区三级联动
Apr 02 Javascript
原生js制作日历控件实例分享
Apr 06 Javascript
JavaScript性能优化总结之加载与执行
Aug 11 Javascript
使用Bootstrap打造特色进度条效果
May 02 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
May 26 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
Aug 17 Javascript
用Fundebug插件记录网络请求异常的方法
Feb 21 Javascript
Vue实现剪切板图片压缩功能
Feb 04 Javascript
js实现自定义右键菜单
May 18 Javascript
element-ui tree结构实现增删改自定义功能代码
Aug 31 Javascript
基于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
自己做矿石收音机
2021/03/02 无线电
用PHP的ob_start();控制您的浏览器cache!
2006/11/25 PHP
PHP生成zip压缩包的常用方法示例
2019/08/22 PHP
jQuery 1.2.x 升? 1.3.x 注意事项
2009/05/06 Javascript
jQuery入门知识简介
2010/03/04 Javascript
初识javascript 文档碎片
2010/07/13 Javascript
jQuery中调用WebService方法小结
2011/03/28 Javascript
javascript判断iphone/android手机横竖屏模式的函数
2011/12/20 Javascript
JavaScript基本编码模式小结
2012/05/23 Javascript
js和jquery对dom节点的操作(创建/追加)
2013/04/21 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
2015/12/15 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
2016/01/27 Javascript
JS通过Cookie判断页面是否为首次打开
2016/02/05 Javascript
Seajs是什么及sea.js 由来,特点以及优势
2016/10/13 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
2016/12/07 Javascript
非常实用的vue导航钩子
2017/03/20 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
2017/08/17 Javascript
在Vue中使用icon 字体图标的方法
2019/06/14 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
2020/03/12 Javascript
Python实现类继承实例
2014/07/04 Python
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
深入讲解Python中的迭代器和生成器
2015/10/26 Python
Python构造自定义方法来美化字典结构输出的示例
2016/06/16 Python
详解Python 切片语法
2019/06/10 Python
Pandas的read_csv函数参数分析详解
2019/07/02 Python
python GUI图形化编程wxpython的使用
2019/07/19 Python
Python中的list与tuple集合区别解析
2019/10/12 Python
tensorflow实现读取模型中保存的值 tf.train.NewCheckpointReader
2020/02/10 Python
建筑项目策划书
2014/01/13 职场文书
小学岗位竞聘方案
2014/01/22 职场文书
优秀共产党员先进事迹
2014/01/27 职场文书
五年级英语教学反思
2014/01/31 职场文书
行政专员求职信范文
2014/05/03 职场文书
保安公司服务承诺书
2014/05/28 职场文书
运动会演讲稿50字
2014/08/25 职场文书
材料员岗位职责范本
2015/04/11 职场文书