Angular中ng-options下拉数据默认值的设定方法_网络技术

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

发布时间 - 2026-01-11 01:59:04 点击率：次

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

演示

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

# ng # options # 默认值 # options设置默认值 # angularjs # angularjs select 赋值 ng-options配置方法 # AngularJS基础 ng-model-options 指令简单示例 # AngularJS中ng-options实现下拉列表的数据绑定方法 # angular指令笔记ng-options的使用方法 # AngularJS动态绑定ng-options的ng-model实例代码 # 详解使用angularjs的ng-options时如何设置默认值(初始值) # AngularJS学习笔记之ng-options指令 # angularJs中ng-model-options设置数据同步的方法 # 遍历 # 就把 # 留个 # 大家多多 # width # height # select # style # block # display # size # font # line # px # padding # control # class # pre # xhtml

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：Python日志格式设计规范_可读性与分析友好方案【教程】

下一篇：CentOS上如何更新PyTorch库

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：Python日志格式设计规范_可读性与分析友好方案【教程】

下一篇：CentOS上如何更新PyTorch库