Javascript Angularjs因工作不正常而命令
我在order by方面遇到了一个小问题,无法解决。Javascript Angularjs因工作不正常而命令,javascript,angularjs,ionic-framework,Javascript,Angularjs,Ionic Framework,我在order by方面遇到了一个小问题,无法解决。 当我重新订购阵列时,我可以看到所有东西都工作得很好,但问题在于列表的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:
当我重新订购阵列时,我可以看到所有东西都工作得很好,但问题在于列表的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>
卖方
Heure
总计
当我点击ng repeat的任何项目时,它会在控制台中显示正确的id。但当我使用重新排序时,我可以看到HTML已经更改,但ng click函数始终呈现旧的:
单击索引0=>控制台1(完美)使用任何类型重新排序后:
单击索引0=>Console1(例如预期为3) 谢谢 更新:更改了阵列名称(复制剪切错误)
更新为@Weijian suggestion我建议使用直接使用范围变量的orderBy。这也是angular docs建议的方法 js html
这种方法更简洁,因为您避免了orderItems函数的混合使用。我解决了这个问题,我来自
ng repeat
循环中的track by$index
,谢谢您的回复,我尝试了您的解决方案,但没有解决问题我解决了,我删除了html中的$index跟踪,一切都很好。我不知道为什么,但我认为这不是一个好的解决方案,对吗?您错过了HTML更改,orderBy:orderItems():
不正确。您可以使用票证跟踪。\u id而不是$index。
$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');
}
}
orderBy:orderItem:reverse