angularJs中的ng-repeat的使用

最近项目中要求做一个下拉的城市选择的功能,由于项目使用了AngularJs框架,所以自然而然的想到ng-repeat指令,免去了自己写循环的烦恼。所以总结一下ng-repeat的使用方法:

代码如下

<!doctype html><html ng-app><head>

    <meta charset="utf-8">

    <title>ng-repeat directive</title></head><body><table ng-controller="CartController">

    <caption>城市选择</caption>

    <tr>

        <th>请选择城市</th>

    </tr>

    <tr ng-repeat="item in items">

        <td>{{item.name}}</td>  

    </tr></table>

<script src="angular.min.js"></script><script>

        $scope.items = [

            {name: "北京"},

            {name: "天津"},

            {name: "上海"}

        ];</script></body></html>

 

这应该是最简单的ng-repeat的使用了。默认在ng-repeat的时候每一个item都要保证是唯一的,否则console就会打出error告诉你哪个key/value是重复的,如下:

$scope.items = [12234];
这个数组2就重复了,html这么遍历它
<li ng-repeat="item in items">{{ item }}</li>
控制台就会抛出一个错误:

官网明确给出是因为值重复了:
Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: item in items, Duplicate key: string:blue, Duplicate value: 2

但是,正常的业务里数组有重复的值是很正常的,难道有重复值的数组要硬要搞成唯一的ng-repeat才能遍历,那这样的话很多业务场景就不能使用ng-repeat了;继续往下看,发现官网给了一个解决的方案
<div ng-repeat="value in [4, 4] track by $index"></div>
于是按照这个方案改了一下
<li ng-repeat="item in items track by $index">{{ item }}</li>
刷新网页,内容被正常解析

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值