刚刚接触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”

  

最新文章

  1. 微信小程序 关于底部导航设置
  2. ubuntu下安装mcrypt
  3. Ioc
  4. 使用extjs6官方模板admin-dashboard
  5. 图形学理论知识 BRDF 双向反射分布函数(Bidirectional Reflectance Distribution Function)
  6. 远程桌面Default.rdp 中各个参数的含义
  7. oracle中获取特定时间的前一天
  8. C#计算当前日期为一年中的第几周
  9. 在Word中直接用快捷键查找选中文本
  10. C#自定义控件在添加引用后不显示在工具箱的解决方法
  11. Nodejs进阶:使用DiffieHellman密钥交换算法
  12. Fiddler 过滤设置
  13. python之json模块
  14. systemd 编写
  15. C语言库函数syslog
  16. html5新增标签/删除标签
  17. C#-WebForm-Repeater的灵活运用、ItemCommand的用法-增删改查、如何不适用Repeater来展示数据?
  18. OpenStack高可用方案及配置
  19. 过滤器chain.doFilter(request,response)的含义
  20. 路边拾遗之其他模块(struct/csv/xlwt/smtp)

热门文章

  1. develop process
  2. css中“zoom:1”是什么意思
  3. 【Beta】Phylab2.0: Postmortem
  4. 使用jquery 操作checkbox
  5. SaltStack运行任务卡住了,怎么办?
  6. 请问FMX手机app多个窗体如何嵌入同一个窗体?
  7. Qt编程之通过鼠标滚轮事件缩放QGraphicsView里面的Item
  8. mysql常用查询归纳
  9. cf493A Vasya and Football
  10. windows oid 利用SNMP获得主机信息(转)