二者都可用于实现下拉列表,并且度娘上有很多关于两者的内容,此处不再赘述,本文为了说明在最近的项目中遇到的相关问题,
可以写成如下格式
ng-repeat
<select>
<option value="x.id" ng-repeat="x in list" ng-bind="x.name">
</option>
</select>
ng-options
<select ng-options="x.id as x.name for x in list" ng-model="listId">
</select>
区别:
- 如上所示,当在select中时ng-repeat需要写在option中,而ng-options不需要option,会自动生成。
- ng-options 一定要和ng-model 搭配,ng-model获取的是列表的value值。
- 注意!!
1).ng-options的value值得类型是number,当list.id是string类型时无法循环
2).ng-repeat的value值类型是string,当list.id是number类型时无法循环
可以根据id类型不同选择,这是在最近的项目中发现的问题,通过上述方法解决,如果有不同见解,欢迎留言。
另:
附上在解决过程中尝试的方法,可能重复,有问题仅做记录(以下简写,以下两种方法都是使用ng-repeat)
【步骤】:列表list中id类型规定为number类型,首次实现页面下拉框时,使用的是ng-repeat,
【结果】:下拉列表显示为空白
【问题】:F12查看Elements,发现下拉列表中option如下显示
<option value="? number:1 ?"></option>
【解决1】 在js中将id装换为string 类型
list.id = list.id+"";
【方法的问题】
1.只是写了一句话,但是需要的地方很多,导致重复....
2.改变了原类型
【解决2】 朋友的思路,在js中写一个方法将id装换为string 类型,并在页面上使用这个方法,具体如下:
.js:
$scope.toString = function(){
list.id.toString();
}
.html
<option value="{{toString(x.id)}}" ng-repeat="x in list" ng-bind="x.name"></option>
【方法的问题】
1.控制台会报错,错误没有深究,路过大神可以指路,如果以后知道了,我会进行补充_.
网友评论