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编程起步(第七课)
Feb 27 Javascript
js创建对象的几种常用方式小结(推荐)
Oct 24 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
Sep 21 Javascript
JavaScript实现控制打开文件另存为对话框的方法
Apr 17 Javascript
基于jQuery实现简单的折叠菜单效果
Nov 23 Javascript
javascript insertAfter()定义与用法示例
Jul 25 Javascript
关于在mongoose中填充外键的方法详解
Aug 14 Javascript
vue-router配合ElementUI实现导航的实例
Feb 11 Javascript
vue的token刷新处理的方法
Jul 17 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
Feb 19 Javascript
Angular CLI 使用教程指南参考小结
Apr 10 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
May 18 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函数extension_loaded()用法实例
2015/01/19 PHP
php从数组中随机选择若干不重复元素的方法
2015/03/14 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
php实现可逆加密的方法
2015/08/11 PHP
PHP入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)
2016/09/11 PHP
PHP页面输出时js设置input框的选中值
2016/09/30 PHP
PHP实现防止表单重复提交功能【基于token验证】
2018/05/24 PHP
Thinkphp 框架扩展之行为扩展原理与实现方法分析
2020/04/23 PHP
Jquery拖拽并简单保存的实现代码
2010/11/28 Javascript
NodeJS的模块写法入门(实例代码)
2012/03/07 NodeJs
Javasipt:操作radio标签详解
2013/12/30 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
2016/03/05 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
纯js实现手风琴效果代码
2020/04/17 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
2017/02/13 Javascript
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
开发Vue树形组件的示例代码
2017/12/21 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
NodeJS搭建HTTP服务器的实现步骤
2018/10/12 NodeJs
angular6的table组件开发的实现示例
2018/12/26 Javascript
Ajax请求时无法重定向的问题解决代码详解
2019/06/21 Javascript
vscode中eslint插件的配置(prettier配置无效)
2019/09/10 Javascript
跟老齐学Python之玩转字符串(2)
2014/09/14 Python
PyQt5每天必学之进度条效果
2018/04/19 Python
python中map的基本用法示例
2018/09/10 Python
python 利用浏览器 Cookie 模拟登录的用户访问知乎的方法
2019/07/11 Python
python网络编程 使用UDP、TCP协议收发信息详解
2019/08/29 Python
Python利用for循环打印星号三角形的案例
2020/04/12 Python
提高python代码运行效率的一些建议
2020/09/29 Python
金属材料工程毕业生个人的自我评价
2013/11/28 职场文书
英文自荐信
2013/12/19 职场文书
2014年会演讲稿范文
2014/01/06 职场文书
我的长生果教学反思
2014/04/28 职场文书
法人单位授权委托书范文
2014/10/06 职场文书
接待员岗位职责范本
2015/04/15 职场文书
呼啸山庄读书笔记
2015/06/29 职场文书