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基础 ng-options 指令详解
AngularJS ng-options 指令 AngularJS 实例 使用数组元素填充下拉列表: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head>
-
AngularJS学习笔记之ng-options指令
1.基本下拉效果(lable for value in array) 其中select标签中的ng-model属性必须有,其值为选中的对象或属性值. <div ng-controller="ngselect"> <p>usage:label for value in array</p> <p>选项,{{selected}}</p> <select ng-model="selected" ng-opti
-
详解使用angularjs的ng-options时如何设置默认值(初始值)
这两天我用ng-options过程中遇到的初始值为空白的问题,记得去年就遇到过,怎么解决的忘记了,费了一阵子功夫之后解决了,想记下来,方便遇到同样问题的小伙伴当然还有自己. 1.场景: 就是做一个查询列表的弹窗,其中有一个条件需要用到下拉菜单,数据是用过ajax传递过去的. 2.实现: a.html: <select ng-model="myselect" ng-options="o for o in options"></select> b
-
AngularJS动态绑定ng-options的ng-model实例代码
什么情况下会需要动态绑定 ng-model 呢?若你的数据结构长得像是下面这样: var Classes = [ { "Name" : "温度 " , "Options" : [ "Cold" , "Hot" , "Normal" ]}, { "Name" : "份量 " , "Options" : [ "Big&qu
-
AngularJS实现select的ng-options功能示例
本文实例讲述了AngularJS实现select的ng-options功能.分享给大家供大家参考,具体如下: controller .controller('MainController', function($scope, $http, $ionicModal, $timeout) { var post = {}; $http.get("data/themeData.json") .success(function(response) { $scope.themeData = res
-
angular指令笔记ng-options的使用方法
1.ng-options指令用途: 在表达式中使用数组或对象来自动生成一个select中的option列表.ng-options与ng-repeat很相似,很多时候可以用ng-repeat来代替ng-options.但是ng-options提供了一些好处,例如减少内存提高速度,以及提供选择框的选项来让用户选择.当select中一个选项被选择,该选项将会使用ng-model自动绑定到对应数据上.如果你想设一个默认值,可以像这样:$scope.selected = $scope.collection
-
AngularJS使用ng-options指令实现下拉框
ng-option指令使用很简单,只需要绑定两个属性: 一个是ng-model用于获取选定的值: 另一个是ng-options用于确定下拉列表的元素数组. 1.问题背景 一般情况下,select下都会有option,但是AngularJS中有指令ng-options,就可以实现select下拉框 2.实现源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>
-
AngularJS实现在ng-Options加上index的解决方法
本文实例讲述了AngularJS实现在ng-Options加上index的解决方法.分享给大家供大家参考,具体如下: Angularjs交流群中有位童学问道如何为Angular select的ng-Options像Angularjs的ng-Repeat一样加上一个索引$index. 其实对于这个问题来说Angular本身并未提供$index之类的变量供使用.但是也不是说对于这个问题我们就没有解决方案. 把这个问题换成角度来看,我们所需要的就是js数组的下标,所以我们如果我们能够在对象上加入下标,
-
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%; heig
-
用jQuery获取IE9下拉框默认值问题探讨
在IE 9.0.8112.16421 下,如果下拉框没有空默认值, 在不对它的option设置select属性情况下,用jquery的 $("#id").find("option:selected").val();方法 将无法取到他的默认值.而在FireFox.chrome.其他IE版本包括IE9的其他小版本下均可以取到.
-
基于vue.js中关于下拉框的值默认及绑定问题
一.今天遇到vue中下拉框问题,故而写点东西留个脚印 <template> <select v-model='selected' @click="disable()"> <option v-for="(option,index) in options" v-bind:value="option.value" :disabled="option.disabled"> {{ option.tex
-
laravel中数据显示方法(默认值和下拉option默认选中)
如下所示: <div class="form-group"> <label>ap状态:</label> <select name="ap_status_id"> <option value ="1">进行中</option> <option value ="2">开始</option> <option value="
-
Vue.js 2.0中select级联下拉框实例
在网上搜索了Vuejs2.0 动态级联select许久未果,决定自己总结一下自己的经验,有关select在Vue.js 2.0版本中的应用.首先我先说一下的我使用的技术,我参考了网上成熟的经验,选择以Vue.js 2.0+Vue-router+Vuex的全家桶. select首先要区分单选和多选,v-model在select单选和多选上有区别. select单选实例: <select v-model="fruit"> <option selected valu
-
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
在使用bootstrap制作后台时用到了响应式导航条,其中dropdown组件更是用的比较多,用的多需要点击的就多,dropdown默认鼠标左键单击才展开,如果使用鼠标放上去(hover)就展开则会省去点击时间,这样能提高效率. 原本的改造思路是:给dropdown元素绑定hover事件,hover上去的时候,执行该元素的click事件--即把hover同步为click,hover即为click. 但想到与其自己来改造,不如先在网上搜索搜索看看有没有现成的插件,果不其然就搜索到了,托管在gith
-
BootStrap中关于Select下拉框选择触发事件及扩展
Select下拉框的问题,想在选择一个选项后,前台显示做出变动,并且知道选择的是第几个选项. 这个很好解决: 如下: <div class="page-header"> <div class="form-horizontal"> <div class="control-label col-lg-0"> </div> <div class="col-lg-2"> <
-
select获取下拉框的值 下拉框默认选中方法
本文主要介绍select下拉框的相关方法. 1.通过id获取下拉框的value和文本值 例如: <select class="form-control" id="numbers"> <option value="1">数字1</option> <option value="2" selected>数字2</option> </select> $("
-
浅谈Vue Element中Select下拉框选取值的问题
之前写了.一个原生的select的,因为展示效果原因,给删除掉了,忘记保存代码了,现在大家展示使用elementUI的下拉框封装一个组件,供咱们项目中经常调用,减少代码量. html: <el-select v-model="ite" placeholder="请选择" value-key="mateGroup"> <el-option style="width: auto" :disabled="
-
vue2.0 下拉框默认标题设置方法
昨天到今天,用vue2.0在写一个性别选择框,一给option添加seledted属性就报错这里 下面是报错的代码 ERROR in ./~/vue-loader/lib/template-compiler.js?id=data-v-c231dfa2!./~/vue-loader/lib/selector.js?type=template&index=0!./src/components/second.vue template syntax error <select v-model=&qu
随机推荐
- Redis集合类型的常用命令小结
- 解析JavaScript实现DDoS攻击原理与保护措施
- PHP的变量类型和作用域详解
- Android使用token维持登陆状态的方法
- mysql 5.7.16 winx64安装配置方法图文教程
- JS访问DOM节点方法详解
- Javascript优化技巧(文件瘦身篇)
- google输入法和dreamweaver冲突了总是出错自动关闭郁闷
- where 子句的执行顺序
- 你真的了解触发器么 数据实时同步更新问题剖析
- 基于jquery鼠标点击其它地方隐藏层的实例代码
- JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
- 菜鸟也可以对系统注册表“动手动脚”
- Linux netstat命令查看并发连接数的方法
- c++ map,mutimap删除问题分析
- java 中枚举类enum的values()方法的详解
- C语言创建链表错误之通过指针参数申请动态内存实例分析
- python 矢量数据转栅格数据代码实例
- mysql如何利用binlog进行数据恢复详解
- 详解Javaee Dao层的抽取