刚刚接触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简单用法及预选项失败的原因的更多相关文章

  1. Shellz中awk的简单用法

    其实shell脚本的功能常常被低估.在实际应用中awk sed 等用法可以为shell提供更为强大的功能.下面我们将一下awk调用的简单方法进行了总结.方便同学们学习: awk的简单用法: 第一种调用 ...

  2. UltraEdit中使用正则表达式-简单用法

    UltraEdit中使用正则表达式 1.认识正则表达式语法: 正则表达式 (UltraEdit Syntax): % 匹配行首 - 表明要搜索的字符串一定在行首. $ 匹配行尾 - 表明要搜索的字符串 ...

  3. 详解AngularJS中的filter过滤器用法

    系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter.如果对smarty比较熟悉的话,学习angularjs会比较容易一点.这 ...

  4. C# Winfom 中ListBox的简单用法

    https://www.cnblogs.com/xielong/p/6744805.html Winform控件ListBox的用法 1.如何添加listBox的值 this.listBox1.Ite ...

  5. (数据科学学习手札54)Python中retry的简单用法

    一.简介 retry是一个用于错误处理的模块,功能类似try-except,但更加快捷方便,本文就将简单地介绍一下retry的基本用法. 二.基本用法 retry: 作为装饰器进行使用,不传入参数时功 ...

  6. java中printf()方法简单用法

    %n 换行 相当于 \n %c 单个字符 %d 十进制整数 %u 无符号十进制数 %f 十进制浮点数 %o 八进制数 %x 十六进制数 %s 字符串 %% 输出百分号 > 在printf()方法 ...

  7. C++中template的简单用法

    模板(Template)指C++程序设计设计语言中采用类型作为参数的程序设计,支持通用程序设计.C++ 的标准库提供许多有用的函数大多结合了模板的观念,如STL以及IO Stream.使用模板可以使用 ...

  8. java 开发中 dom4j的简单用法

    Java中处理XML的方式有很多种,个人任务dom4j还是比较好用的.下面介绍以下简单的使用方法 先把import补充上 import org.dom4j.Document; import org.d ...

  9. 转 jsp中 session的简单用法

    Session对象:是用来分别保存每一个用户信息的对象,以便于跟踪用户的操作状态.Session的信息保存在服务端,Session的ID保存在客户机的Cookie中.事实上,在许多服务器上,如果浏览器 ...

随机推荐

  1. Nginx的安装及反向代理设置

    因为项目的缘故,接触到了Nginx的安装和反向代理设置,和大家分享下. 一.Nginx的下载.安装cd /homewget http://nginx.org/download/nginx-1.0.5. ...

  2. jquery正则表达式显示文本框输入范围 只能输入数字、小数、汉字、英文字母的方法

    正则表达式限制文本框只能输入数字 许多时候我们在制作表单时需要限制文本框输入内容的类型,下面我们用正则表达式限制文本框只能输入数字.小数点.英文字母.汉字等各类代码.1.文本框只能输入数字代码(小数点 ...

  3. http://www.cnblogs.com/zhuli19901106/p/4356419.html

    http://www.cnblogs.com/zhuli19901106/p/4356419.html

  4. bzoj 2075: [POI2004]KAG

    整天鬼畜题搞搞,感觉药丸…… 这种题出到xjoi模拟题里,太神了…… 这题的核心在于分割Cograph,尝试把Cograph的合成过程给求出来. 我们将这张图中的边为黑边,在这张图的补图中出现的边为白 ...

  5. js 简单倒计时插件和使用方法

    // 倒计时插件 (function (){ function countdown(config){ var startDate = config.start ? new Date(config.st ...

  6. java事件响应方法汇总(容器类监听、监听器类、AbstractAction、反射)

    Java图形用户界面中,处理事件时所必须的步骤是: 1.创建接受响应的组件(控件)2.实现相关事件监听接口3.注册事件源的动作监听器4.事件触发时的事件处理 相应的可以通过以下的集中方式来作出事件响应 ...

  7. Log4j MDC Tomcat下报异常org.apache.log4j.helpers.ThreadLocalMap

    严重: The web application [/qdgswx] created a ThreadLocal with key of type [org.apache.log4j.helpers.T ...

  8. hdu 畅通工程

    http://acm.hdu.edu.cn/showproblem.php?pid=1863 #include <cstdio> #include <cstring> #inc ...

  9. Linux企业级项目实践之网络爬虫(25)——管理源代码之SVN

    软件项目开发中,一般会用到源代码管理工具SVN.版本控制是管理数据变更的一种技术.对于程序员来说,它已经成为不可或缺的工具,因为他们经常修改软件代码,产生部分的变更,然后第二天再取消所有的变更.想象有 ...

  10. HDU5044---Tree 树链剖分

    大致题意:add1 u v   u到v路径上所有点的权值加上k,add2  u 到v路径上所有边的权值加上k 最后输出所有点的权值,边的权值..树链剖分预处理然后来个线性O(n)的操作.刚开始用线段树 ...