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
模拟用户操作Input元素,不会触发相应事件
May 11 Javascript
IE下js调试工具Companion.JS
Oct 15 Javascript
浅谈jQuery中的事件
Mar 23 Javascript
基于jquery实现最简单的选项卡切换效果
May 08 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
浅谈JavaScript的全局变量与局部变量
Jun 10 Javascript
AngularJS $http模块POST请求实现
Apr 08 Javascript
用js实现before和after伪类的样式修改的示例代码
Sep 07 Javascript
Vue中的字符串模板的使用
May 17 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
Aug 15 Javascript
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
基于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初学者常见问题集合 修正版(21问答)
2010/03/23 PHP
使用 laravel sms 构建短信验证码发送校验功能
2017/11/06 PHP
PHPMAILER实现PHP发邮件功能
2018/04/18 PHP
php 根据URL下载远程图片、压缩包、pdf等文件到本地
2019/07/26 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
JMenuTab简单使用说明
2008/03/13 Javascript
javascript 按键事件(兼容各浏览器)
2013/12/20 Javascript
浮动的div自适应居中显示的js代码
2013/12/23 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
原生JS实现响应式瀑布流布局
2015/04/02 Javascript
jQuery基于ID调用指定iframe页面内的方法
2016/07/06 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
使用jQuery和ajax代替iframe的方法(详解)
2017/04/12 jQuery
详解Angular2中Input和Output用法及示例
2017/05/21 Javascript
详解Vue使用命令行搭建单页面应用
2017/05/24 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
2017/12/07 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
微信小程序实现循环动画效果
2018/07/16 Javascript
VuePress 快速踩坑小结
2019/02/14 Javascript
layUI实现前端分页和后端分页
2019/07/27 Javascript
JS实现扫码枪扫描二维码功能
2020/01/03 Javascript
vue-amap根据地址回显地图并mark的操作
2020/11/03 Javascript
举例讲解Python设计模式编程中对抽象工厂模式的运用
2016/03/02 Python
Python读取和处理文件后缀为.sqlite的数据文件(实例讲解)
2017/06/27 Python
Python3使用xml.dom.minidom和xml.etree模块儿解析xml文件封装函数的方法
2019/09/23 Python
5分钟实现Canvas鼠标跟随动画背景
2019/11/18 HTML / CSS
The Hut英国:英国领先的豪华在线百货商店
2019/07/26 全球购物
装饰资料员岗位职责
2013/12/30 职场文书
人事专员工作职责
2014/02/22 职场文书
农村党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
六一领导慰问欢迎词
2015/01/26 职场文书
产品质量保证书范本
2015/02/27 职场文书
四大名著读书笔记
2015/06/25 职场文书
2019年工作总结范文
2019/05/21 职场文书
解决MySQL添加新用户-ERROR 1045 (28000)的问题
2022/03/03 MySQL
SpringBoot整合minio快速入门教程(代码示例)
2022/04/03 Java/Android