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 相关文章推荐
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
Sep 22 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
Dec 19 Javascript
jquery-syntax动态语法着色示例代码
May 14 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
Oct 16 Javascript
JavaScript中的函数(二)
Dec 23 Javascript
Vue.js使用v-show和v-if的注意事项
Dec 13 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
Feb 13 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
Feb 18 Javascript
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
微信小程序实现的一键连接wifi功能示例
Apr 24 Javascript
vue draggable resizable gorkys与v-chart使用与总结
Sep 05 Javascript
JS实现字体背景跑马灯
Jan 06 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
Yii框架函数简单用法分析
2019/09/09 PHP
25个优雅的jQuery Tooltip插件推荐
2011/05/25 Javascript
artDialog双击会关闭对话框的修改过程分享
2013/08/05 Javascript
javascript打印输出json实例
2013/11/11 Javascript
JQuery中的html()、text()、val()区别示例介绍
2014/09/01 Javascript
实现图片预加载的三大方法及优缺点分析
2014/11/19 Javascript
使用mini-define实现前端代码的模块化管理
2014/12/25 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
七个不允许错过的jQuery小技巧
2015/12/21 Javascript
移动端 一个简单易懂的弹出框
2016/07/06 Javascript
js select下拉联动 更具级联性!
2020/04/17 Javascript
Bootstrap选项卡学习笔记分享
2017/02/13 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
2017/05/22 Javascript
vue2.0 常用的 UI 库实例讲解
2017/12/12 Javascript
Webpack 之 babel-loader文件预处理器详解
2018/03/23 Javascript
Vue.js实现的计算器功能完整示例
2018/07/11 Javascript
vue操作动画的记录animate.css实例代码
2019/04/26 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
通过实例解析js可枚举属性与不可枚举属性
2020/12/02 Javascript
JavaScript async/await原理及实例解析
2020/12/02 Javascript
[55:54]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python图片验证码生成代码
2016/07/02 Python
Python使用asyncio包处理并发详解
2017/09/09 Python
python如何获取apk的packagename和activity
2020/01/10 Python
如何使用Cython对python代码进行加密
2020/07/08 Python
pycharm不以pytest方式运行,想要切换回普通模式运行的操作
2020/09/01 Python
Ratchet 模态框的实现
2020/08/19 HTML / CSS
2014年秋季开学典礼致辞
2014/08/02 职场文书
小区的门卫岗位职责
2014/10/01 职场文书
喝酒驾驶检讨书
2014/10/01 职场文书
考试作弊检讨书
2015/01/27 职场文书
招商银行收入证明
2015/06/17 职场文书
文化苦旅读书笔记
2015/06/29 职场文书
2016五一手机促销广告语
2016/01/28 职场文书
Golang 正则匹配效率详解
2021/04/25 Golang
java解析XML详解
2021/07/09 Java/Android