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高级程序设计》阅读笔记(二) ECMAScript中的原始类型
Feb 27 Javascript
探讨jQuery的ajax使用场景(c#)
Dec 03 Javascript
jquery prop的使用介绍及与attr的区别
Dec 19 Javascript
php常见的页面跳转方法汇总
Apr 15 Javascript
JS实现slide文字框缩放伸展效果代码
Nov 05 Javascript
JQuery Mobile实现导航栏和页脚
Mar 09 Javascript
一个超简单的jQuery回调函数例子(分享)
Aug 08 Javascript
js实现开启密码大写提示
Dec 21 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
Feb 09 Javascript
通过源码分析Vue的双向数据绑定详解
Sep 24 Javascript
Angular使用Restful的增删改
Dec 28 Javascript
通过JavaScript下载文件到本地的方法(单文件)
Mar 17 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
全国FM电台频率大全 - 14 江西省
2020/03/11 无线电
PhpMyAdmin出现export.php Missing parameter: what /export_type错误解决方法
2012/08/09 PHP
php获取textarea的值并处理回车换行的方法
2014/10/20 PHP
HTML中嵌入PHP的简单方法
2016/02/16 PHP
CodeIgniter集成smarty的方法详解
2016/05/26 PHP
ThinkPHP3.2.3框架邮件发送功能图文实例详解
2019/04/23 PHP
IE之动态添加DOM节点触发window.resize事件
2010/07/27 Javascript
jquery插件之easing 动态菜单
2010/08/21 Javascript
jQuery的运行机制和设计理念分析
2011/04/05 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
2015/02/25 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
2015/12/31 Javascript
JS实现根据用户输入分钟进行倒计时功能
2016/11/14 Javascript
Bootstrap Table使用心得总结
2016/11/29 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
JQuery异步提交表单与文件上传功能示例
2017/01/12 Javascript
nodejs基础知识
2017/02/03 NodeJs
fullCalendar中文API官方文档
2017/02/07 Javascript
Three.js利用性能插件stats实现性能监听的方法
2017/09/25 Javascript
微信小程序WebSocket实现聊天对话功能
2018/07/06 Javascript
深入理解js A*寻路算法原理与具体实现过程
2018/12/13 Javascript
微信小程序实现收货地址左滑删除
2020/11/18 Javascript
[52:26]完美世界DOTA2联赛决赛 FTD vs Phoenix 第一场 11.08
2020/11/11 DOTA
Python通过select实现异步IO的方法
2015/06/04 Python
Python实现的字典值比较功能示例
2018/01/08 Python
Flask框架实现的前端RSA加密与后端Python解密功能详解
2019/08/13 Python
python使用协程实现并发操作的方法详解
2019/12/27 Python
Django查询优化及ajax编码格式原理解析
2020/03/25 Python
Tensorflow之MNIST CNN实现并保存、加载模型
2020/06/17 Python
CSS3制作文字半透明倒影效果的两种实现方式
2014/08/08 HTML / CSS
医学院学生求职简历的自我评价
2013/10/24 职场文书
银行存款证明样本
2014/01/17 职场文书
《诺贝尔》教学反思
2014/02/17 职场文书
灰雀教学反思
2014/04/28 职场文书
医院我们的节日活动实施方案
2014/08/22 职场文书
何玥事迹观后感
2015/06/16 职场文书
golang中字符串MD5生成方式总结
2021/07/04 Golang