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 this指针
Jul 30 Javascript
jQuery 使用手册(一)
Sep 23 Javascript
深入理解JavaScript系列(13) This? Yes,this!
Jan 18 Javascript
javascript 得到文件后缀名的思路及实现
May 09 Javascript
JavaScript跨域方法汇总
Oct 16 Javascript
PHP守护进程实例
Mar 06 Javascript
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
使用vue-router在Vue页面之间传递数据的方法
Jul 15 Javascript
JS实现轮播图效果
Jan 11 Javascript
Vue自定义表单内容检查rules实例
Oct 30 Javascript
Vue中computed和watch有哪些区别
Dec 19 Vue.js
关于uniApp editor微信滑动问题
Jan 15 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
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
通过ifame指向的页面高度调整iframe的高度
2006/10/05 Javascript
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
2007/01/09 Javascript
用js实现键盘方向键翻页功能的代码
2007/06/03 Javascript
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
循环 vs 递归浅谈
2013/02/28 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
2013/06/27 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
2014/05/12 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
2014/05/28 Javascript
jquery设置表单元素为不可用的简单代码
2016/07/04 Javascript
Vue.js组件tabs实现选项卡切换效果
2016/12/01 Javascript
详解Vue 实例中的生命周期钩子
2017/03/21 Javascript
vue 文件目录结构详解
2017/11/24 Javascript
vue 注册组件的使用详解
2018/05/05 Javascript
vue源码学习之Object.defineProperty 对数组监听
2018/05/30 Javascript
vue+iview 实现可编辑表格的示例代码
2018/10/31 Javascript
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
Python的一些用法分享
2012/10/07 Python
python实现的简单抽奖系统实例
2015/05/22 Python
Python中type的构造函数参数含义说明
2015/06/21 Python
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
Python批处理删除和重命名文件夹的实例
2018/07/11 Python
Python调用服务接口的实例
2019/01/03 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
Python定时任务APScheduler的实例实例详解
2019/07/22 Python
Manjaro、pip、conda更换国内源的方法
2020/11/17 Python
用友笔试题目
2016/10/25 面试题
董事长秘书工作职责
2014/06/10 职场文书
商铺门前三包责任书
2014/07/25 职场文书
实习生工作证明范本
2014/09/14 职场文书
2015年元旦文艺晚会总结(学院)
2014/11/28 职场文书
英语导游词
2015/02/13 职场文书
2015年度服装销售工作总结
2015/03/31 职场文书
运输公司工作总结
2015/08/11 职场文书
医院岗前培训心得体会
2016/01/08 职场文书
使用 Apache Dubbo 实现远程通信(微服务架构)
2022/02/12 Servers