NG重复不能正常工作

  • Z时代
  • 2024-01-10
  • 分类：问答

我想用ng-repeat，但它不工作：NG重复不能正常工作

<!DOCTYPE html> 
<html lang="en" ng-app> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-route.js"></script> 
    </head> 
    <body ng-init="jj=[1,2,2,3]"> 
    <ul> 
     <li ng-repeat="x in jj">{{x}}</li> 
    </ul> 
    </body> 
</html>

输出黑屏。输出信号源（来自浏览器的取检查元素）：

<html class="ng-scope" lang="en" ng-app=""><head><style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}</style> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-route.js"></script> 
    </head> 
    <body ng-init="jj=[1,2,2,3]"> 
    <ul> 
     <!-- ngRepeat: x in jj --> 
    </ul> 
    <!-- Code injected by live-server --> 
<script type="text/javascript"> 
    // <![CDATA[ <-- For SVG support 
    if ('WebSocket' in window) { 
     (function() { 
      function refreshCSS() { 
       var sheets = [].slice.call(document.getElementsByTagName("link")); 
       var head = document.getElementsByTagName("head")[0]; 
       for (var i = 0; i < sheets.length; ++i) { 
        var elem = sheets[i]; 
        head.removeChild(elem); 
        var rel = elem.rel; 
        if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") { 
         var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, ''); 
         elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf()); 
        } 
        head.appendChild(elem); 
       } 
      } 
      var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://'; 
      var address = protocol + window.location.host + window.location.pathname + '/ws'; 
      var socket = new WebSocket(address); 
      socket.onmessage = function(msg) { 
       if (msg.data == 'reload') window.location.reload(); 
       else if (msg.data == 'refreshcss') refreshCSS(); 
      }; 
      console.log('Live reload enabled.'); 
     })(); 
    } 
    // ]]> 
</script> 
</body></html>

回答：

你有duplicates in your array，尝试using track by像：

ng-repeat="x in jj track by $index"

工作例如：

<!DOCTYPE html>  
<html lang="en" ng-app>  
    <head>  
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>  
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-route.js"></script>  
    </head>  
    <body ng-init="jj=[1,2,2,3]">  
    <ul>  
     <li ng-repeat="x in jj track by $index">{{x}}</li>  
    </ul>  
    </body>  
</html>

回答：

问题是你在数组中有重复的元素

<ul> 
    <li ng-repeat="x in jj track by $index">{{x}}</li> 
</ul>

JSFIDDLE

你Ç阅读更多关于跟踪在以下URL

track by

以上是 NG重复不能正常工作 的全部内容， 来源链接： utcz.com/qa/264450.html

回到顶部