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 相关文章推荐
Add Formatted Data to a Spreadsheet
Jun 12 Javascript
基本jquery的控制tabs打开的数量的代码
Oct 17 Javascript
Grid得到选择行数据的方法总结
Jan 17 Javascript
JQuery实现简单时尚快捷的气泡提示插件
Dec 20 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
Jun 21 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
Oct 08 Javascript
jQuery简单实现遍历数组的方法
Apr 14 Javascript
JS实现CheckBox复选框全选全不选功能
May 06 Javascript
详解微信小程序 相对定位和绝对定位
May 11 Javascript
js 只比较时间大小的实例
Oct 26 Javascript
手挽手带你学React之React-router4.x的使用
Feb 14 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
基于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 strtotime函数详解
2009/12/18 PHP
php cURL和Rolling cURL并发方式比较
2013/10/30 PHP
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
ThinkPHP 模板substr的截取字符串函数详解
2017/01/09 PHP
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
2006/10/17 Javascript
利用JQuery的load函数动态加载其它页面的内容的实现代码
2010/12/14 Javascript
Javascript字符串对象的常用方法简明版
2014/06/26 Javascript
js中数组排序sort方法的原理分析
2014/11/20 Javascript
jQuery实现根据类型自动显示和隐藏表单
2015/03/18 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
2015/08/20 Javascript
深入理解JS函数的参数(arguments)的使用
2016/05/28 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
jQuery 获取select选中值及清除选中状态
2016/12/13 Javascript
Nodejs实现爬虫抓取数据实例解析
2018/07/05 NodeJs
详解Nodejs get获取远程服务器接口数据
2019/03/26 NodeJs
vscode 调试 node.js的方法步骤
2020/09/15 Javascript
[00:12]DAC2018 Miracle-站上中单舞台,他能否再写奇迹?
2018/04/06 DOTA
python简单程序读取串口信息的方法
2015/03/13 Python
用Python编写一个简单的俄罗斯方块游戏的教程
2015/04/03 Python
老生常谈进程线程协程那些事儿
2017/07/24 Python
python中将\\uxxxx转换为Unicode字符串的方法
2018/09/06 Python
python实现顺时针打印矩阵
2019/03/02 Python
Python依赖包整体迁移方法详解
2019/08/15 Python
python 实现turtle画图并导出图片格式的文件
2019/12/07 Python
在pytorch中对非叶节点的变量计算梯度实例
2020/01/10 Python
python如何进入交互模式
2020/07/06 Python
使用CSS禁止textarea调整大小功能的方法
2015/03/13 HTML / CSS
阿里巴巴美国:Alibaba美国
2019/11/24 全球购物
酒店副总岗位职责
2013/12/24 职场文书
市级文明单位申报材料
2014/05/07 职场文书
节能环保演讲稿
2014/08/28 职场文书
幼儿园小班见习报告
2014/10/31 职场文书
2014年环境整治工作总结
2014/12/10 职场文书
《藏戏》教学反思
2016/02/23 职场文书
python 多态 协议 鸭子类型详解
2021/11/27 Python