angularJs中的ng-repeat的使用

素颜马尾好姑娘i 2022-07-14 00:57 99阅读 0赞

最近项目中要求做一个下拉的城市选择的功能，由于项目使用了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 = \[1，2，2，3，4\];  
这个数组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>  
刷新网页，内容被正常解析。

发表评论取消回复

表情：

评论列表（有 0 条评论，99人围观）

还没有评论，来说两句吧...

相关阅读

相关使用AngularJS操作DOM(angular.element) angularJs中的jqLite

AngularJs是不直接操作DOM的，但是在平时的开发当中，我们有的时候还是需要操作一些DOM的，如果使用原生的JS的话操作过于麻烦，所以大家一般都是使用jQuery，jQu

妖狐艹你老母/ 2022年12月29日 09:38/ 0 赞/ 161 阅读

相关 angularjs控制器的使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

川长思鸟来/ 2022年09月13日 08:36/ 0 赞/ 171 阅读

相关 angularjs学习之八（angularjs中isolate scope的使用）

angular js中指令directive有个特别有用的东西，那就是 isolate scope （被隔离的scope）关于具体他和全局的scope 有什么区别，可以参考

灰太狼/ 2022年08月02日 04:52/ 0 赞/ 208 阅读

相关 angularjs Error: [ngRepeat:dupes] http://errors.angularjs.org/1.5.8/ngRepeat/dupes?

> 出现这个错误的原因是如果页面中使用了ng-repeat，angularjs默认是根据里面的内容判断是否相同的，如果里面出现相同的内容就会报错，这里要注意的是，比如如下的内容

短命女/ 2022年07月14日 01:44/ 0 赞/ 168 阅读

相关 angularJs中的ng-repeat的使用

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

素颜马尾好姑娘i/ 2022年07月14日 00:57/ 0 赞/ 100 阅读

相关 AngularJS中使用ngTable

> 在HTML中使用[ngTable][] 可以方便的进行排序，筛选，分页，添加，编辑删除等操作，不用再从数据库里面进行分页等操作需要引用的文件

一时失言乱红尘/ 2022年07月13日 13:19/ 0 赞/ 152 阅读

相关深究AngularJS——AngularJS中的Controller(控制器)

先看个示例 <div ng-app="myApp" ng-controller="myCtrl"> <!-- 在该控制器内保存着如下两个Model里的数据 ng-

太过爱你忘了你带给我的痛/ 2022年07月12日 06:51/ 0 赞/ 287 阅读

相关【AngularJS】5.AngularJS 工具方法以及AngularJS中使用jQuery

1. Angularjs 工具方法，参考AngularJS API [https://docs.angularjs.org/api][https_docs.angularjs

叁歲伎倆/ 2022年06月18日 02:27/ 0 赞/ 266 阅读

相关 AngularJs的简单使用

嗯额，刚刚上手了AngularJs,感觉功能很强大，做一个简单的入门笔记吧，新鲜出炉的,嘿嘿。首先我们要了解下什么是AngularJs: AngularJS 是一个 J

爱被打了一巴掌/ 2022年05月15日 10:51/ 0 赞/ 174 阅读

相关 angularjs[ngRepeat:dupes]

最近在开发过程中，发现一个问题，在使用angularjs的ng-repeat遍历过程中，如果遍历的数组中包含相同的项，则会抛错。 <!DOCTYPE html>

古城微笑少年丶/ 2022年03月24日 16:56/ 0 赞/ 152 阅读