AngularJS的ng-repeat在Chrome中不起作用

AngularJS ng-repeat doesn work in Chrome

本文关键字：不起作用 Chrome ng-repeat AngularJS      更新时间：2023-09-26

我知道这个问题已经问过很多次了，可能被认为是重复的。但我没有找到答案，于是决定创造新的问题。

问题是ng-repeat在Chrome中不正确工作，而在FF中工作得很好。有几个建议，为了解决这个问题，但我已经使用他们，它没有帮助。

    其中一个建议是使用数组作为模型而不是对象。2. 第二种是按顺序使用单引号的literal。

我满足了这两个条件，但在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。

原因可能是您没有初始化反向变量。

(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>

相关文章：