码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-04-07 20:16:48      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:

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

  

 

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

标签:

原文地址:http://www.cnblogs.com/volare/p/5364899.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!