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一种取同级值的方式(比如你在GridView中)
Mar 15 Javascript
javascript垃圾收集机制的原理分析
Dec 08 Javascript
js实现图片360度旋转
Jan 22 Javascript
利用纯JS实现像素逐渐显示的方法示例
Aug 14 Javascript
详解Angular5 路由传参的3种方法
Apr 28 Javascript
基于element-ui组件手动实现单选和上传功能
Dec 06 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
Jun 24 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
Aug 12 Javascript
Angular8 Http拦截器简单使用教程
Aug 20 Javascript
vue点击按钮动态创建与删除组件功能
Dec 29 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
Jun 04 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
Oct 20 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自动给文章加关键词链接的函数代码
2012/11/29 PHP
利用PHP判断文件是否为图片的方法总结
2017/01/06 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
php连接mysql之mysql_connect()与mysqli_connect()的区别
2020/07/19 PHP
js单例模式的两种方案
2013/10/22 Javascript
jQuery实现的简洁下拉菜单导航效果代码
2015/08/26 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
2016/02/29 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
2016/05/25 Javascript
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
2017/02/12 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
2017/06/07 Javascript
详解ES6之用let声明变量以及let loop机制
2017/07/15 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
2017/09/30 Javascript
解决js ajax同步请求造成浏览器假死的问题
2018/01/18 Javascript
手写Node静态资源服务器的实现方法
2018/03/20 Javascript
ant design 日期格式化的实现
2020/10/27 Javascript
[01:06:43]完美世界DOTA2联赛PWL S3 PXG vs GXR 第二场 12.19
2020/12/24 DOTA
利用Python开发实现简单的记事本
2016/11/15 Python
利用Python yagmail三行代码实现发送邮件
2018/05/11 Python
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
解决Python安装时报缺少DLL问题【两种解决方法】
2019/07/15 Python
Python模块/包/库安装的六种方法及区别
2020/02/24 Python
发现两个有趣的CSS3动画效果
2013/08/14 HTML / CSS
印度尼西亚值得信赖的第一家网店:Bhinneka
2018/07/16 全球购物
法国在线药房:DoctiPharma
2020/10/21 全球购物
介绍一下MD5加密算法
2016/11/12 面试题
工作疏忽检讨书
2014/01/25 职场文书
社区交通安全实施方案
2014/03/22 职场文书
国庆节演讲稿
2014/05/27 职场文书
暑期社会实践个人总结
2015/03/06 职场文书
2015年端午节活动策划书
2015/05/05 职场文书
新娘婚礼答谢词
2015/09/29 职场文书
2019年关于小学生课外阅读情况的分析报告
2019/12/02 职场文书
Django实现聊天机器人
2021/05/31 Python
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL