AngularJs ng-repeat重复项异常解决方案
ng-repeat="v in arr track by $index"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body ng-app="myApp">
<!--
ng-init:初始化数据
ng-init="person={name:'小明'}"
-->
<div ng-app="myApp" ng-controller="myController">
<input type="text" ng-model="iptValue">
<input type="button" ng-click="clickFn()" value="按钮">
<ul>
<li ng-repeat="v in arr track by $index">{{v}}</li>
</ul>
</div>
</body>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
// [] ---> 依赖
var app = angular.module("myApp",[]);
// $scope作用域:作用域范围myController
app.controller("myController",function($scope){
$scope.arr = ["111","222"];
$scope.clickFn = function(){
var v = $scope.iptValue;
$scope.arr.push(v);
$scope.iptValue = "";
}
});
</script>
</html>
1.现象
- <ul ng-app="myApp" ng-controller="myCtrl">
- <li ng-repeat="x in items">
- <strong>{{x}}</strong>
- </li>
- </ul>
- <script>
- //使用ng-repeat 重复 html代码
- var app = angular.module('myApp', []);
- app.controller('myCtrl', function ($scope) {
- $scope.items = [1, 2, 3, 2];
- });
- </script>
当数组中有重复项时,抛出异常
点击异常链接,没有看到异常
2.解决方法
默认在ng-repeat的时候每一个item都要保证是唯一的,否则console就会打出error告诉你哪个key/value是重复的。
指定跟踪值唯一可以了
- <ul ng-app="myApp" ng-controller="myCtrl">
- <li ng-repeat="x in items track by $index">
- <strong>{{x}}</strong>
- </li>
- </ul>
- <script>
- //使用ng-repeat 重复 html代码
- var app = angular.module('myApp', []);
- app.controller('myCtrl', function ($scope) {
- $scope.items = [1, 2, 3, 2];
- });
- </script>
AngularJs ng-repeat重复项异常解决方案的更多相关文章
- Part 6 AngularJS ng repeat directive
ng-repeat is similar to foreach loop in C#. Let us understand this with an example. Here is what we ...
- 关于:未能加载文件或程序集“ICSharpCode.SharpZipLib”或它的某一个依赖项异常的解决方案
问题: 今天项目迁移忽然又个ICSharpCode.SharpZipLib.dll 程序包丢失了,于是我在网上下载一个这样的包,结果程序运行就提示:未能加载文件或程序集“ICSharpCode.Sha ...
- AngularJs ng-repeat解决循环对象出现重复项报错的问题
问题:ng-repeat 的循环对象是不能出现重复项的,所以如果有重复的就会报错,应该是 key value的问题吧,不是很了解内部运行机制:经过查询发现 在 循环后面加上 track by $i ...
- sed tr 去除PATH中的重复项
最近发现由于自己不良的安装软件的习惯,shell的PATH路径包含了很多冗余的项.这里使用shell命令去除PATH的冗余项. export PATH=$(echo $PATH | sed 's/:/ ...
- 【python cookbook】【数据结构与算法】10.从序列中移除重复项且保持元素间顺序不变
问题:从序列中移除重复的元素,但仍然保持剩下的元素顺序不变 解决方案: 1.如果序列中的值时可哈希(hashable)的,可以通过使用集合和生成器解决.
- sql分组合并字段重复项sql for xml path
-------------------------(情景描述) 在我们处理数据时,可能会碰到这种情景: Id Name 1 a,b 2 ...
- 每日一道 LeetCode (8):删除排序数组中的重复项和移除元素
每天 3 分钟,走上算法的逆袭之路. 前文合集 每日一道 LeetCode 前文合集 代码仓库 GitHub: https://github.com/meteor1993/LeetCode Gitee ...
- [LeetCode] Find All Duplicates in an Array 找出数组中所有重复项
Given an array of integers, 1 ≤ a[i] ≤ n (n = size of array), some elements appear twice and others ...
- [LeetCode] Remove Duplicates from Sorted List 移除有序链表中的重复项
Given a sorted linked list, delete all duplicates such that each element appear only once. For examp ...
随机推荐
- .netcore Swagger 生成 api接口文档
1, 引用第三方包, Swashbuckle.AspNetCore Swashbuckle.AspNetCore.Swagger Swashbuckle.AspNetCore.SwaggerUI 最简 ...
- MyBatis入门及CRUD
MyBatis是一个ORM的数据操作框架 myBatis的基本配置 首先创建一个普通 java项目,引入响应jar包,然后引入mybatis的xml配置, <?xml version=" ...
- python 去除字符串的首末两端的空白字符
my_str = " adsffff adsfsad " my_str.strip() 使用strip()默认将 str 两端的空白字符去除掉 同时还有rstrip() 和 lst ...
- PHP和JS中全局变量和局部变量
一,PHP中全局变量和局部变量 php与C++中对全局变量和局部变量定义类似,全局变量:函数外定义的变量,在全局通用:局部变量:在函数内定义的变量,只在函数内有效.PHP中变量范围跨越了include ...
- MYSQL处理高并发,防止库存超卖(图解)
抢购场景完全靠数据库来扛,压力是非常大的,我们在最近的一次抢购活动改版中,采用了redis队列+mysql事务控制的方案,画了个简单的流程图: 先来就库存超卖的问题作描述:一般电子商务网站都会遇到如团 ...
- [ActionScript 3.0] 模拟win7彩色气泡屏保效果
主文件: package { import com.views.BubbleView; import com.views.ColorfulBubble; import flash.display.Sp ...
- Java初学者的学习路线建议
java学习这一部分其实也算是今天的重点,这一部分用来回答很多群里的朋友所问过的问题,那就是我你是如何学习Java的,能不能给点建议?今天我是打算来点干货,因此咱们就不说一些学习方法和技巧了,直接来谈 ...
- github常用项目汇总
1.smartTable(智能表格) android自动生成表格框架 使用方法:在github中搜索smartTable 进入项目后,查看开源项目的介绍和使用方法即可.
- 布局优化之ViewStub、Include、merge使用分析
布局技巧 在Android开发过程中,我们会遇到很多的问题,随着UI界面越来越多,布局的重复性.复杂度也随之增加,所幸的是,Android官方也给出了几个对布局进行优化的方法,下面根据自己的理解对官方 ...
- Mac下常用快捷键(转)
前提,先熟读键盘快捷键符号:http://www.cnblogs.com/EasonJim/p/6350075.html 基本操作: Command-Z 撤销 Command-X 剪切 Command ...