AngularJs ng-repeat重复项异常解决方案

ng-repeat="v in arr track by $index"

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8" />
  5.     <title>Document</title>
  6. </head>
  7. <body ng-app="myApp">
  8.     <!--
  9.         ng-init:初始化数据
  10.         ng-init="person={name:'小明'}"
  11.      -->
  12.     <div ng-app="myApp" ng-controller="myController">
  13.         <input type="text" ng-model="iptValue">
  14.         <input type="button" ng-click="clickFn()" value="按钮">
  15.         <ul>
  16.             <li ng-repeat="v in arr track by $index">{{v}}</li>
  17.         </ul>
  18.     </div>
  20. </body>
  21. <script type="text/javascript" src="angular.min.js"></script>
  22. <script type="text/javascript">
  23. // [] ---> 依赖
  24. var app = angular.module("myApp",[]);
  25. // $scope作用域：作用域范围myController
  26. app.controller("myController",function($scope){
  27.     $scope.arr = ["111","222"];
  28.     $scope.clickFn = function(){
  29.         var v = $scope.iptValue;
  30.         $scope.arr.push(v);
  31.         $scope.iptValue = "";
  32.     }
  33. });
  34. </script>
  35. </html>
 

1.现象

[html] view plain copy
 print?在CODE上查看代码片派生到我的代码片
  1. <ul ng-app="myApp" ng-controller="myCtrl">  
  2.     <li ng-repeat="x in items">  
  3.         <strong>{{x}}</strong>  
  4.     </li>  
  5. </ul>  
  6. <script>  
  7.     //使用ng-repeat 重复 html代码  
  8.     var app = angular.module('myApp', []);  
  9.     app.controller('myCtrl', function ($scope) {  
  10.         $scope.items = [1, 2, 3, 2];  
  11.     });  
  12. </script>  
当数组中有重复项时，抛出异常



点击异常链接，没有看到异常

2.解决方法

默认在ng-repeat的时候每一个item都要保证是唯一的，否则console就会打出error告诉你哪个key/value是重复的。

指定跟踪值唯一可以了

[html] view plain copy
 print?在CODE上查看代码片派生到我的代码片
  1. <ul ng-app="myApp" ng-controller="myCtrl">  
  2.     <li ng-repeat="x in items track by $index">  
  3.         <strong>{{x}}</strong>  
  4.     </li>  
  5. </ul>  
  6. <script>  
  7.     //使用ng-repeat 重复 html代码  
  8.     var app = angular.module('myApp', []);  
  9.     app.controller('myCtrl', function ($scope) {  
  10.         $scope.items = [1, 2, 3, 2];  
  11.     });  
  12. </script>  
posted @ 2017-04-11 10:07  Chen,ChunChang  阅读(1216)  评论(0)  编辑  收藏  举报