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自定义的函数
Aug 05 Javascript
pjblog中的UBBCode.js
Apr 25 Javascript
jMessageBox 基于jQuery的窗口插件
Dec 09 Javascript
jQuery针对各类元素操作基础教程
Aug 29 Javascript
JS实现一个按钮的方法
Feb 05 Javascript
javascript实现炫酷的拖动分页
May 11 Javascript
javascript实现rgb颜色转换成16进制格式
Jul 10 Javascript
微信小程序 实现拖拽事件监听实例详解
Nov 16 Javascript
关于微信上网页图片点击全屏放大效果
Dec 19 Javascript
react中使用css的7中方式(最全总结)
Feb 11 Javascript
ElementUI Tag组件实现多标签生成的方法示例
Jul 08 Javascript
Vue 刷新当前路由的实现代码
Sep 26 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
磨咖啡豆的密诀
2021/03/03 冲泡冲煮
php面向对象全攻略 (十七) 自动加载类
2009/09/30 PHP
解析linux下安装memcacheq(mcq)全过程笔记
2013/06/27 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
PHP判断手机是IOS还是Android
2015/12/09 PHP
php实现微信分享朋友链接功能
2019/02/18 PHP
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
2011/07/04 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
2013/08/21 Javascript
JavaScript绑定事件监听函数的通用方法
2016/05/14 Javascript
浅谈JavaScript中的this指针和引用知识
2016/08/05 Javascript
js与jquery分别实现tab标签页功能的方法
2016/11/18 Javascript
微信小程序之拖拽排序(代码分享)
2017/01/21 Javascript
Nodejs高扩展性的模板引擎 functmpl简介
2017/02/13 NodeJs
详解AngularJS之$window窗口对象
2018/01/17 Javascript
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
2019/08/20 Javascript
JQuery发送ajax请求时中文乱码问题解决
2019/11/14 jQuery
在vue中实现禁止回退上一步,路由不存历史记录
2020/07/22 Javascript
python中关于日期时间处理的问答集锦
2013/03/08 Python
python图像处理之反色实现方法
2015/05/30 Python
举例详解Python中threading模块的几个常用方法
2015/06/18 Python
Python while 循环使用的简单实例
2016/06/08 Python
Python彩色化Linux的命令行终端界面的代码实例分享
2016/07/02 Python
各种Python库安装包下载地址与安装过程详细介绍(Windows版)
2016/11/02 Python
Python实现繁体中文与简体中文相互转换的方法示例
2018/12/18 Python
学会迭代器设计模式,帮你大幅提升python性能
2021/01/03 Python
HTML5 canvas绘制的玫瑰花效果
2014/05/29 HTML / CSS
The North Face北面英国官网:美国著名户外品牌
2017/12/13 全球购物
英国领先的游戏零售商:GAME
2019/09/24 全球购物
海南地接欢迎词
2014/01/14 职场文书
美术专业个人自我评价
2014/01/18 职场文书
校园十大歌手策划书
2014/02/01 职场文书
人力资源部经理助理岗位职责
2014/03/04 职场文书
入股合作协议书
2014/10/12 职场文书
科技活动总结范文
2015/05/11 职场文书
欢送会主持词
2015/07/01 职场文书