Angularjs:排序在chrome和firefox浏览器中显示不同的结果

时间:2014-03-26 04:01:15

标签: angularjs google-chrome sorting firefox angularjs-ng-repeat

HI我在chrome和firefox浏览器中得到不同的数据排序结果。 Firefox显示正确的。

HTML:

<table class="datatable">
              <thead>
                <tr>
                  <th width="5%" class="Rank">Rank&nbsp;<a ng-click="sort_by('Rank')"><i class="icon-sort" ng-show="pagedItems[currentPage].length > 1"></i></a></th>
                  <th width="10%" class="Interviews">Interviews&nbsp;<a ng-click="sort_by('Interviews')"><i class="icon-sort" ng-show="pagedItems[currentPage].length > 1"></i></a></th>
                  <th width="25%" class="Dealership">Dealership&nbsp;<a ng-click="sort_by('Dealership')"><i class="icon-sort" ng-show="pagedItems[currentPage].length > 1"></i></a></th>
                  <th width="15%" class="Satisfaction">Overall Satisfaction&nbsp;<a ng-click="sort_by('Satisfaction')"><i class="icon-sort" ng-show="pagedItems[currentPage].length > 1"></i></a></th>
                  <th width="15%" class="Loyalty">Loyalty&nbsp;<a ng-click="sort_by('Loyalty')"><i class="icon-sort" ng-show="pagedItems[currentPage].length > 1"></i></a></th>
                </tr>
              </thead>
              <tbody>
                <tr ng-repeat="item in pagedItems[currentPage] | orderBy:sortingOrder:reverse">
                    <td>{{item.Rank}} - {{item.$$hashKey}}</td>
                    <td>{{item.Interviews}}</td>
                    <td>{{item.Dealership}}</td>
                    <td>{{item.Satisfaction | number:1}}</td>
                    <td>{{item.Loyalty}}</td>
                </tr>
            </tbody>

我最初用Rank:

排序

角度控制器代码:

$scope.sortingOrder = sortingOrder;
$scope.reverse = false;

Firefox中的结果:Rank列显示具有Hashkey值的Rank

Fire Fox Result

Chrome结果:排名列显示带有Hashkey值的排名

Chrom Result

我在这里用Rank排序。具有相同排名的数据在其$$哈希键之后排序。 Firefox提供$$ hashkey以获取数据。在Chrome中,第二条记录在给出哈希密钥的情况下是最后一条记录。

我无法理解为什么会这样。有什么方法我可以避免。

提前致谢。

1 个答案:

答案 0 :(得分:2)

我在Google Chrome中遇到了同样的问题。 补救措施是在页面加载时设置初始排序字段。

我之前没有这样做过:

$scope.items = {[$data]}    



        $scope.mySortFunction = function(item) {
            if(isNaN(item[$scope.sortExpression]))
                return item[$scope.sortExpression];
            return parseInt(item[$scope.sortExpression]);
        }

我将上面改为:

$scope.items = {[$data]}    

        //we want the 1st load to be sorted by sort_code
        $scope.sortExpression = 'sort_code';

        $scope.mySortFunction = function(item) {
            if(isNaN(item[$scope.sortExpression]))
                return item[$scope.sortExpression];
            return parseInt(item[$scope.sortExpression]);
        }