Angular中ng-options下拉数据默认值的设定方法

 更新时间:2017年06月21日 09:53:42   作者:FutaoSmile丶  
本篇文章主要介绍了Angular中ng-options下拉数据默认值的设定方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

今天学习了一下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
        })
      })
    }


演示

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Angularjs添加排序查询功能的实例代码

    Angularjs添加排序查询功能的实例代码

    这篇文章主要介绍了Angularjs添加排序查询功能的实例代码,需要的朋友可以参考下
    2017-10-10
  • 详解Angular 4 表单快速入门

    详解Angular 4 表单快速入门

    本篇文章主要介绍了详解Angular 4 表单快速入门,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • Angular5中状态管理的实现

    Angular5中状态管理的实现

    这篇文章主要介绍了Angular5中状态管理的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • Angularjs的键盘事件的绑定

    Angularjs的键盘事件的绑定

    这篇文章主要介绍了Angularjs的键盘事件的绑定的相关资料,这里提供了两种方法,1.ng内置指令,2.自定义指令,并进行比较,需要的朋友可以参考下
    2017-07-07
  • AngularJS中指令的四种基本形式实例分析

    AngularJS中指令的四种基本形式实例分析

    这篇文章主要介绍了AngularJS中指令的四种基本形式,结合实例形式分析了AngularJS指令的定义、使用方法及相关注意事项,需要的朋友可以参考下
    2016-11-11
  • Angular Renderer (渲染器)的具体使用

    Angular Renderer (渲染器)的具体使用

    这篇文章主要介绍了Angular Renderer (渲染器)的具体使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • angularjs实现猜数字大小功能

    angularjs实现猜数字大小功能

    这篇文章主要为大家详细介绍了angularjs实现猜数字大小功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • 详解Angular数据绑定及其实现方式

    详解Angular数据绑定及其实现方式

    数据绑定是将应用程序UI或用户界面绑定到模型的机制。使用数据绑定,用户将能够使用浏览器来操纵网站上存在的元素。
    2021-05-05
  • 使用AngularJS实现表单向导的方法

    使用AngularJS实现表单向导的方法

    这篇文章主要介绍了使用AngularJS实现表单向导的方法,AngularJS是一款高人气JavaScript库,需要的朋友可以参考下
    2015-06-06
  • AngularJS  双向数据绑定详解简单实例

    AngularJS 双向数据绑定详解简单实例

    这篇文章主要介绍了AngularJS 双向数据绑定详解简单实例的相关资料,需要的朋友可以参考下
    2016-10-10

最新评论