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中.事实上,在许多服务器上,如果浏览器 ...
随机推荐
- php 获取网站根目录的写法
路径方式,代码如下: define('BASE_PATH',str_replace('\\','/',realpath(dirname(__FILE__).'/'))."/"); ...
- Android再学习-20141023-Intent-Thread
20141023-Android再学习 Intent对象的基本概念 Intent是Android应用程序组件之一 Intent对象在Android系统中表示一种意图 Intent当中最重要的内容是ac ...
- C 产生随机码
#include<stdio.h>#include<malloc.h>#include<conio.h>#include<stdlib.h>#inclu ...
- cpm效果介绍
浮层菜单 图片弹窗
- Android学习之AndroidManifest.xml清单之<uses-feature>
无意之中看了几个小时的官方英文文档,关于<uses-feature>的介绍.有必要在这里记录一下,应该有很多人不知道<uses-feature>到底是做什么用的,因为我们平时根 ...
- form 和 ngModel
参考 https://docs.angularjs.org/api/ng/type/ngModel.NgModelController https://docs.angularjs.org/api/n ...
- 这样就算会了PHP么?-4
数组初步 <?php $ereg = 'tm'; $str = 'hello,tm,Tm,tM,TM.'; $rep_str = eregi_replace($ereg, 'TM', $str) ...
- IEqualityComparer<T>接口
IEqualityComparer<T>接口的对象的主要作用在于自定义判断两个对象是否相等. 其中最常用的方法: bool Equals(T x, T y); 实现该方法用于比较两个对象是 ...
- SQL判断一个数是整数还是小数
DECLARE @number1 AS numeric(10,2),@number2 AS numeric(10,2) SELECT @number1=10.00,@number2=10.2 SELE ...
- socket pro
/etc/exports/tmp目录共享为任何人可以共享并可以进行读写操作 /tmp *(rw,no_root_squash) /home/test 192.168.1.*(rw) *(ro) /et ...