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对数组的常用操作代码 数组方法总汇
Jan 27 Javascript
iframe如何动态创建及释放其所占内存
Sep 03 Javascript
Javascript学习笔记之数组的遍历和 length 属性
Nov 23 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
Dec 18 Javascript
js判断checkbox是否选中个数的方法(超简单)
Aug 19 Javascript
JS实现双击内容变为可编辑状态
Mar 03 Javascript
angular使用post、get向后台传参的问题实例
May 27 Javascript
vue axios同步请求解决方案
Sep 29 Javascript
解决循环中setTimeout执行顺序的问题
Jun 20 Javascript
vueScroll实现移动端下拉刷新、上拉加载
Mar 22 Javascript
微信小程序tabBar 返回tabBar不刷新页面
Jul 25 Javascript
微信小程序实现侧边分类栏
Oct 21 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
用ADODB来让PHP操作ACCESS数据库的方法
2006/12/31 PHP
谈谈新手如何学习PHP 默默经典版本
2009/08/04 PHP
允许phpmyadmin空密码登录的配置方法
2011/05/29 PHP
(PHP实现)只使用++运算实现加法,减法,乘法,除法
2013/06/27 PHP
php使用array_rand()函数从数组中随机选择一个或多个元素
2014/04/28 PHP
php判断GIF图片是否为动画的方法
2020/09/04 PHP
PHP类的声明与实例化及构造方法与析构方法详解
2016/01/26 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
laravel使用数据库测试注意事项
2020/04/10 PHP
Javascript入门学习资料收集整理篇
2008/07/06 Javascript
Javascript与flash交互通信基础教程
2008/08/07 Javascript
EXT中xtype的含义分析
2010/01/07 Javascript
js新闻滚动 js如何实现新闻滚动效果
2013/01/07 Javascript
轻松创建nodejs服务器(10):处理上传图片
2014/12/18 NodeJs
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
Document.body.scrollTop的值总为零的快速解决办法
2016/06/09 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
2016/07/01 Javascript
vue2.0开发实践总结之疑难篇
2016/12/07 Javascript
vue的传参方式汇总和router使用技巧
2018/05/22 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
微信小程序入门之指南针
2020/10/22 Javascript
[55:35]VGJ.S vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
详谈python http长连接客户端
2017/06/12 Python
Python实现识别手写数字大纲
2018/01/29 Python
Python3使用SMTP发送带附件邮件
2020/06/16 Python
使用keras实现Precise, Recall, F1-socre方式
2020/06/15 Python
Python JSON常用编解码方法代码实例
2020/09/05 Python
纯CSS绘制漂亮的圆形图案效果
2014/05/07 HTML / CSS
简述DNS进行域名解析的过程
2013/12/02 面试题
专业幼师实习生自我鉴定范文
2013/12/08 职场文书
另类冲刺标语
2014/06/24 职场文书
大学军训决心书
2015/02/05 职场文书
情侣之间的道歉短信
2015/05/12 职场文书
毕业证明书
2015/06/19 职场文书
初中毕业感言300字
2015/07/31 职场文书
《爬天都峰》教学反思
2016/02/23 职场文书