2016-08-13 145 views
0

我知道這個問題已被多次詢問,可能會被視爲重複。但我沒有找到答案,並決定創建一個新問題。AngularJS ng-repeat在Chrome中不起作用

問題是ng-repeat在Chrome中無法正常工作,而在FF中正常工作。有幾個建議,以解決這個問題,但我已經使用它們,並沒有幫助。

  1. 其中一個建議是使用數組作爲模型而不是對象。 2.第二個是按順序使用單引號文字。

我遇到了兩種情況,仍然在Chrome中看到問題。

這裏是我的代碼:

<a ng-click="pred = 'price'; reverse=!reverse"> 
    <span></span> 
</a> | 
<a ng-click="pred = 'name'; reverse=!reverse"> 
    <span></span> 
</a> | 
<a ng-click="pred = 'time'; reverse=!reverse"> 
    <span></span> 
</a> 
<div ng-repeat="item in items | orderBy:pred:!reverse"> 
</div> 

也有鏈接,您可以在兩個瀏覽器打開。有些項目按時間排序(左欄),它們在FF中排序,但不在Chrome中排序。

我正在使用angular 1.2.9我認爲。請諮詢如何解決這個問題。

+0

小提琴請? –

回答

1

原因可能是您沒有初始化反向變量。

(function(angular) { 
 
    'use strict'; 
 
angular.module('orderByExample1', []) 
 
    .controller('ExampleController', ['$scope', function($scope) { 
 
    $scope.friends = [ 
 
     {name: 'John', phone: '555-1212', age: 10}, 
 
     {name: 'Mary', phone: '555-9876', age: 19}, 
 
     {name: 'Mike', phone: '555-4321', age: 21}, 
 
     {name: 'Adam', phone: '555-5678', age: 35}, 
 
     {name: 'Julie', phone: '555-8765', age: 29} 
 
    ]; 
 
    }]); 
 
})(window.angular);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="orderByExample1"> 
 
    <div ng-controller="ExampleController" ng-init='reverse=false;'> 
 
    <a ng-click="pred = 'name'; reverse=!reverse"> 
 
    Name 
 
</a> | 
 
<a ng-click="pred = 'phone'; reverse=!reverse"> 
 
    Phone 
 
</a> | 
 
<a ng-click="pred = 'age'; reverse=!reverse"> 
 
    Age 
 
</a> 
 
    <table class="friends"> 
 
    <tr> 
 
     <th>Name</th> 
 
     <th>Phone Number</th> 
 
     <th>Age</th> 
 
    </tr> 
 
    <tr ng-repeat="friend in friends | orderBy:pred:reverse"> 
 
     <td>{{friend.name}}</td> 
 
     <td>{{friend.phone}}</td> 
 
     <td>{{friend.age}}</td> 
 
    </tr> 
 
    </table> 
 
</div> 
 
</body>

+0

接受答案,如果它是正確的。:) –