Angular.js顺序不正常

Question

我面对订单方面的一个小问题，我无法理解。
当我整理数组时，我可以看到每件事都运行良好，但是问题出在列表的ng-click函数中。
例如，如果我有这个数组：

$scope.ticketsEncour = [
  {_id: 1, vendeur: 'John Doe', date_ticket: '18:52', total: 50},
  {_id: 2, vendeur: 'Foo Bar', date_ticket: '12:12', total: 20},
  {_id: 3, vendeur: 'John Smith', date_ticket: '11:02', total: 10},
  {_id: 4, vendeur: 'Test Test', date_ticket: '05:10', total: 6000}
]

这是其整理和点击功能：

$scope.reverse = false;
$scope.orderItems = function (item) {
$scope.reverse = !$scope.reverse;
  if (item != undefined) {
    if (item == $scope.orderItem) {
      $scope.orderType = $scope.orderType == '+' ? '-' : '+';
    }
    else {
      $scope.orderItem = item;
      $scope.orderType = '+';
    }
  }

  $('.iconOrder').removeClass('up').removeClass('down');
  if ($scope.orderType == '+') {
    $('.iconOrder[name="' + $scope.orderItem + '"]').addClass('down')
  }
  else {
    $('.iconOrder[name="' + $scope.orderItem + '"]').addClass('up')
  }

  return $scope.orderType + $scope.orderItem;
}
$scope.goToCaissePage = function (id) {
  id = id.replace("app/caisse/", "");
  console.log(id);
};

还有我的HTML代码

<ion-list class="list articlesList swipedList" show-delete="showDelete">
      <ion-item class="item item-button-right stable-bg">
        <span class="row">
          <span class="col col-20" ng-click="orderItems('vendeur')">
            <strong>Vendeur</strong>
            <div class="iconOrder" name="vendeur">
              <i class="icon ion-android-arrow-dropup"></i>
              <i class="icon ion-android-arrow-dropdown"></i>
            </div>
          </span>
          <span class="col col-20" ng-click="orderItems('date_ticket')">
            <strong>Heure</strong>
            <div class="iconOrder" name="date_ticket">
              <i class="icon ion-android-arrow-dropup"></i>
              <i class="icon ion-android-arrow-dropdown"></i>
            </div>
          </span>
          <span class="col col-10" ng-click="orderItems('total')">
            <strong>Total</strong>
            <div class="iconOrder" name="total">
              <i class="icon ion-android-arrow-dropup"></i>
              <i class="icon ion-android-arrow-dropdown"></i>
            </div>
          </span>
        </span>
      </ion-item>


      <ion-item class="item item-button-right pad-item" ng-repeat="ticket in ticketsEncour | orderBy : orderBy : orderItem:reverse  track by $index">
        <span class="row">
          <span class="col col-20 col-pad" ng-click="goToCaissePage('app/caisse/{{ticket._id}}')">
            <div>
              <a href="" style="color: #333; text-decoration: none">{{ ticket.vendeur }}</a>
            </div>
          </span>
          <span class="col col-20 col-pad" ng-click="goToCaissePage('app/caisse/{{ticket._id}}')">
            <div>
              <a href="" style="color: #333; text-decoration: none">{{ ticket.date_ticket | date:'HH:mm' }}</a>
            </div>
          </span>
          <span class="col col-10 col-pad" ng-click="goToCaissePage('app/caisse/{{ticket._id}}')">
            <div>
              <a href="" style="color: #333; text-decoration: none">{{ ticket.total.toFixed(2) }}€</a>
            </div>
          </span>
        </span>
      </ion-item>
    </ion-list>

当我单击ng-repeat的任何项目时，它将在控制台中显示正确的ID。 但是当我使用重新排序时，我可以的是HTML发生了变化，但是ng-click函数始终呈现旧的：

单击索引0 =>控制台1（完美）
用任何类型的东西整理后：
单击索引0 =>控制台1（例如，预期为3）

谢谢

更新：更改了阵列名称（复制剪切错误）
更新为@Weijian建议

Answer 1

我建议使用直接使用范围变量的orderBy。 这也是有角度的文档建议的方法。

JS

$scope.reverse = false;
$scope.orderItems = function (item) {
    if( item == $scope.orderItem ){
        $scope.reverse = !$scope.reverse;
    }
    $scope.orderItem = item;
    $('.iconOrder').removeClass('up').removeClass('down');        
    if( $scope.reverse ){        
        $('.iconOrder[name="' + $scope.orderItem + '"]').addClass('down');
    }
    else {
        $('.iconOrder[name="' + $scope.orderItem + '"]').addClass('up');
    }
}

HTML

orderBy:orderItem:reverse

https://docs.angularjs.org/api/ng/filter/orderBy

因为您避免了orderItems函数的混合使用，所以这种方法更加简洁。

Answer 2

我解决了这个问题，我是在ng-repeat循环中track by $index