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 相关文章推荐
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
Apr 29 Javascript
js重写alert控件(适合学习js的新手朋友)
Aug 24 Javascript
分享十五款 jQuery 社交网络分享插件
May 16 Javascript
Backbone.js框架中Model与Collection的使用实例
May 07 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
May 25 Javascript
jquery制做精致的倒计时特效
Jun 13 Javascript
jQuery选择器实例应用
Jan 05 Javascript
Angular2中如何使用ngx-translate进行国际化
May 21 Javascript
详解vue-router 路由元信息
Sep 13 Javascript
浅谈关于iview表单验证的问题
Sep 29 Javascript
小程序开发中如何使用async-await并封装公共异步请求的方法
Jan 20 Javascript
layui异步加载table表中某一列数据的例子
Sep 16 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中copy on write写时复制机制介绍
2014/05/13 PHP
在Mac OS上编译安装Nginx+PHP+MariaDB开发环境的教程
2016/02/23 PHP
Yii2.0预定义的别名功能小结
2016/07/04 PHP
php把文件设置为插件的技巧方法
2020/02/03 PHP
JavaScript之自定义类型
2012/05/04 Javascript
javascript时区函数介绍
2012/09/14 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
2015/10/08 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
2016/06/09 Javascript
javascript 定时器工作原理分析
2016/12/03 Javascript
JS正则子匹配实例分析
2016/12/22 Javascript
原生JS实现N级菜单的代码
2017/05/21 Javascript
利用Ionic2 + angular4实现一个地区选择组件
2017/07/27 Javascript
React-Native中props具体使用详解
2017/09/04 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
2018/02/22 Javascript
Vue实现搜索 和新闻列表功能简单范例
2018/03/16 Javascript
WebSocket的通信过程与实现方法详解
2018/04/29 Javascript
node中modules.exports与exports导出的区别
2018/06/08 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
2019/02/18 Javascript
vue中多路由表头吸顶实现的几种布局方式
2019/04/12 Javascript
Vue 实现拨打电话操作
2020/11/16 Javascript
[01:03]PWL开团时刻DAY6——别打我
2020/11/05 DOTA
python 快速排序代码
2009/11/23 Python
详解Python的Django框架中的模版相关知识
2015/07/15 Python
python图片验证码生成代码
2016/07/02 Python
Python+matplotlib实现填充螺旋实例
2018/01/15 Python
Python实现带参数与不带参数的多重继承示例
2018/01/30 Python
Python代码块批量添加Tab缩进的方法
2018/06/25 Python
python使用pygame框架实现推箱子游戏
2018/11/20 Python
python微信撤回监测代码
2019/04/29 Python
如何利用python进行时间序列分析
2020/08/04 Python
python em算法的实现
2020/10/03 Python
周生生珠宝香港官网:Chow Sang Sang(香港及海外配送)
2019/09/05 全球购物
酒店公关部经理岗位职责
2013/11/24 职场文书
给女朋友的道歉短信
2015/05/12 职场文书
创业计划之特色精品店
2019/08/12 职场文书
Linux服务器离线安装 nginx的详细步骤
2022/06/16 Servers