NG重复不能正常工作

我想用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>

来源

2017-12-27 webpersistence

控制台中是否有任何错误。 –

@webpersistence是否能够解决该问题？ –

你有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>

来源

2017-12-27 11:20:26

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

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

JSFIDDLE

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

track by

来源

2017-12-27 11:21:40

NG重复不能正常工作

回答

相关问题