zoukankan      html  css  js  c++  java

  • 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>  
  • 相关阅读:
    Ubuntu上VNC 配置
    Ubuntu远程桌面xrdp方法
    sudo 免密码
    Ubuntu 12.04 root默认密码？ 如何使用root登录？
    DNS 和 IPv6 配置攻略
    计算机专业学习浅谈
    [图像]张正友论文翻译(2)
    [图像]张正友论文翻译(1)
    [图像]用Matlab在图像上画矩形框
    word如何修改尾注
  • 原文地址：https://www.cnblogs.com/ChenChunChang/p/6692247.html
Copyright © 2011-2022 走看看