AngularJS中ng-options简单用法及预选项失败的原因
刚刚接触AngularJs,记录一下ng-options的使用。
1、构造key-value数据
$scope.types = [
{id:"1",type:"AA"},
{id:"2",type:"BB"},
{id:"3",type:"CC"}
];
2、绑定
<select ng-model="selectType" ng-options="t.id as t.type for t in types"> <option values=""></option> </select>
ng-options="t.id as t.type for t in types" 代表生成的option标签 <option value="t.id"> t.type</option>
在使用当中需要下拉框默认显示 BB 这条数据,开始以为 $scope.selectType=2 就可以让下拉框默认显示BB,结果失败了。
查资料发现:
ng-model 是通过引用而不是通过值来控制model的。
上述例子中,想预选中BB标签,然后将id=2复制给model,只是将数值传给了model,并不能得到预期的效果。
需要将BB的引用传给model。 $scope.selectType=$scope.types[1].id
此外还需到此问题:
html标签:
<select class="form-control" ng-model="aa.b" ng-options="zp.id as zp.name for zp in zps"> </select>
数据:
$scope.zps=[
{id:"1",name:"aaaa"},
{id:"2",name:"bbbb"},
{id:"3",name:"bbbc"}
];
需要给select标签设置默认选项,指令如下:
$scope.aa={b:"1"}; 下拉框将默认显示为“aaaa”
AngularJS中ng-options简单用法及预选项失败的原因的更多相关文章
- Shellz中awk的简单用法
其实shell脚本的功能常常被低估.在实际应用中awk sed 等用法可以为shell提供更为强大的功能.下面我们将一下awk调用的简单方法进行了总结.方便同学们学习: awk的简单用法: 第一种调用 ...
- UltraEdit中使用正则表达式-简单用法
UltraEdit中使用正则表达式 1.认识正则表达式语法: 正则表达式 (UltraEdit Syntax): % 匹配行首 - 表明要搜索的字符串一定在行首. $ 匹配行尾 - 表明要搜索的字符串 ...
- 详解AngularJS中的filter过滤器用法
系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter.如果对smarty比较熟悉的话,学习angularjs会比较容易一点.这 ...
- C# Winfom 中ListBox的简单用法
https://www.cnblogs.com/xielong/p/6744805.html Winform控件ListBox的用法 1.如何添加listBox的值 this.listBox1.Ite ...
- (数据科学学习手札54)Python中retry的简单用法
一.简介 retry是一个用于错误处理的模块,功能类似try-except,但更加快捷方便,本文就将简单地介绍一下retry的基本用法. 二.基本用法 retry: 作为装饰器进行使用,不传入参数时功 ...
- java中printf()方法简单用法
%n 换行 相当于 \n %c 单个字符 %d 十进制整数 %u 无符号十进制数 %f 十进制浮点数 %o 八进制数 %x 十六进制数 %s 字符串 %% 输出百分号 > 在printf()方法 ...
- C++中template的简单用法
模板(Template)指C++程序设计设计语言中采用类型作为参数的程序设计,支持通用程序设计.C++ 的标准库提供许多有用的函数大多结合了模板的观念,如STL以及IO Stream.使用模板可以使用 ...
- java 开发中 dom4j的简单用法
Java中处理XML的方式有很多种,个人任务dom4j还是比较好用的.下面介绍以下简单的使用方法 先把import补充上 import org.dom4j.Document; import org.d ...
- 转 jsp中 session的简单用法
Session对象:是用来分别保存每一个用户信息的对象,以便于跟踪用户的操作状态.Session的信息保存在服务端,Session的ID保存在客户机的Cookie中.事实上,在许多服务器上,如果浏览器 ...
随机推荐
- RxJava 与 Retrofit 结合的最佳实践
转自:http://gank.io/post/56e80c2c677659311bed9841?from=timeline&isappinstalled=0&nsukey=g1D1Y6 ...
- dede分页
{dede:list pagesize ='} <div class="intro clearfix"> <ul class="pic"> ...
- Symfony2源码分析——启动过程2
文章地址:http://www.hcoding.com/?p=46 上一篇分析Symfony2框架源码,探究Symfony2如何完成一个请求的前半部分,前半部分可以理解为Symfony2框架为处理请求 ...
- python文件_读取
1.文件的读取和显示 方法1: f=open(r'G:\2.txt') print f.read() f.close() 方法2: try: t=open(r'G:\2.txt') print t.r ...
- 兼容IE与firefox、chrome的css 线性渐变(linear-gradient)
现行渐变首先看下示例(1)垂直渐变 (2)垂直渐变 IE系列 filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF ...
- 阅读记录:Learning multiple layers of representation(杂乱笔记)
典型的浅层学习结构: 传统隐马尔可夫模型(HMM).条件随机场 (CRFs).最大熵模型(Maxent).支持向量机(SVM).核回归及仅含单隐层的多层感知器(MLP)等. 局部表示,分布式表示和稀疏 ...
- cf D. Renting Bikes
http://codeforces.com/contest/363/problem/D 先对b和p排序,用二分求出可以租的车子的最大辆数,其中用mid以后的个人钱数去租前mid的价钱的车子. #inc ...
- leetcode: sortlist之四种方法
原题链接:https://oj.leetcode.com/problems/sort-list/ 题目:空间复杂度为常数,时间复杂度为O(nlogn)的排序链表实现 方法一:第一想法是模拟数组的快速排 ...
- MVC4.0系统开发新手历程(四)数据列表查询
任何系统都不可避免的就是数据的查询展示,我觉得这里最值得一说的就是分部视图以及数据分页了 首先添加控制器 在控制其上面的名字为Index的Action上面右击,添加视图即可添加对应的视图,分部视图呈现 ...
- BOT、BT、PPP形式介绍(2)
BT1.什么是BT BT投资是BOT的一种变换形式,即Build-Transfer(建设—转让),政府通过特许协议,引入国外资金或民间资金进行专属于政府的基础设施建设,基础设施建设完工后,该项 ...