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”

转载于:https://www.cnblogs.com/volare/p/5364899.html

AngularJS中ng-options简单用法及预选项失败的原因相关推荐

python count函数代码_python中count函数简单用法
python中count函数简单用法 python中count函数的用法 Python count()方法描述 Python count() 方法用于统计字符串里某个字符出现的次数.可选参数为在字符 ...
android中checkbox使用方法,Android开发中CheckBox的简单用法示例
本文实例讲述了Android开发中CheckBox的简单用法.分享给大家供大家参考,具体如下: CheckBox是一种在界面开发中比较常见的控件,Android中UI开发也有CheckBox,简单的说 ...
C#窗体设计中ToolTip的简单用法
本文介绍C#窗体设计中ToolTip的简单用法. 操作流程 1.1. ToolTip信息提示框作用 C#中提供了信息提示框,这有很多用处,可以提示控件或者用户自定义的属性信息,而且可以自动弹出或者用户 ...
C++中的Lock简单用法
简单记录一下C++中的Lock的用法下面是使用临界区进行线程同步首先定义一个临界区对象 CCriticalSection m_CritSect; //临界对象,同步线程使用在需要使用到可能起冲突 ...
Shellz中awk的简单用法
其实shell脚本的功能常常被低估.在实际应用中awk sed 等用法可以为shell提供更为强大的功能.下面我们将一下awk调用的简单方法进行了总结.方便同学们学习: awk的简单用法: 第一种调用 ...
python中parse.add_argument()简单用法
argparse模块简单使用流程以及与命令行的交互 1.导入模块 2.创建解析器 3.添加参数 4.解析参数 5使用参数完整代码与命令行的交互 argparse 模块是 Python 内置的一个用 ...
**matlab中fprintf函数简单用法**
1.fprintf函数:将数据按指定格式写入到文本文件中. 2.用法说明: fprintf(fid, format, variables): 按指定的格式将变量的值输出到屏幕或指定文件: fid为文件 ...
python 中 feedparser的简单用法
最近在机器学习实战中用到feedparser ,然后简单总结了一下: feedparser是python中最常用的RSS程序库,使用它我们可轻松地实现从任何 RSS 或 Atom 订阅源得到标题.链接 ...
C# Winfom 中ListBox的简单用法
Winform控件ListBox的用法 1.如何添加listBox的值 this.listBox1.Items.Add("张晓东"); 2.如何判断listBox集合是否添加过 / ...

AngularJS中ng-options简单用法及预选项失败的原因

AngularJS中ng-options简单用法及预选项失败的原因相关推荐

最新文章

热门文章