刚刚接触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. php 获取网站根目录的写法

    路径方式,代码如下: define('BASE_PATH',str_replace('\\','/',realpath(dirname(__FILE__).'/'))."/"); ...

  2. Android再学习-20141023-Intent-Thread

    20141023-Android再学习 Intent对象的基本概念 Intent是Android应用程序组件之一 Intent对象在Android系统中表示一种意图 Intent当中最重要的内容是ac ...

  3. C 产生随机码

    #include<stdio.h>#include<malloc.h>#include<conio.h>#include<stdlib.h>#inclu ...

  4. cpm效果介绍

    浮层菜单 图片弹窗

  5. Android学习之AndroidManifest.xml清单之<uses-feature>

    无意之中看了几个小时的官方英文文档,关于<uses-feature>的介绍.有必要在这里记录一下,应该有很多人不知道<uses-feature>到底是做什么用的,因为我们平时根 ...

  6. form 和 ngModel

    参考 https://docs.angularjs.org/api/ng/type/ngModel.NgModelController https://docs.angularjs.org/api/n ...

  7. 这样就算会了PHP么?-4

    数组初步 <?php $ereg = 'tm'; $str = 'hello,tm,Tm,tM,TM.'; $rep_str = eregi_replace($ereg, 'TM', $str) ...

  8. IEqualityComparer<T>接口

    IEqualityComparer<T>接口的对象的主要作用在于自定义判断两个对象是否相等. 其中最常用的方法: bool Equals(T x, T y); 实现该方法用于比较两个对象是 ...

  9. SQL判断一个数是整数还是小数

    DECLARE @number1 AS numeric(10,2),@number2 AS numeric(10,2) SELECT @number1=10.00,@number2=10.2 SELE ...

  10. socket pro

    /etc/exports/tmp目录共享为任何人可以共享并可以进行读写操作 /tmp *(rw,no_root_squash) /home/test 192.168.1.*(rw) *(ro) /et ...