javascript - AngularJs - 元素在其复选框被选中时置于顶部

Question

这个问题是基于this previous one

我有一个像这样的ng-repeat:

<li ng-repeat="opt in namesCtrl.uniqueCars">
    <input type="checkbox" ng-model="namesCtrl.filter['cars'][opt.element]" | orderBy:['checkbox','-count']"><p2>{{opt.element}} ({{opt.count}})</p2>
</li>

元素取自 this.uniqueCars

this.uniqueCars=[
    {'element':'Ford','count':3,'checkbox':false},
    {'element':'Honda','count':2,'checkbox':false},
    {'element':'Ferrari','count':1,'checkbox':false},
    {'element':'Delorean','count':6,'checkbox':false}
];

View 中选中的项目转到this.filter(我用于其他目的)

this.filter = {
    "cars": {}
}

所以我想要实现的是在 View 中对复选框列表进行排序，所以当其中一个项目被选中时，它会转到顶部，就像这样

为了做到这一点，我有一个像这样的 $watch

$scope.$watch("namesCtrl.filter", function(nv,ov){
    angular.forEach(self.uniqueCars, function(opt){
    opt.checkbox = nv.cars[opt.element]
    })
}, true)

但是当按复选框值排序时，行为非常不一致(当第一次点击时它完成工作，好的，但当取消点击时它不起作用，当再次点击时它以相反的方式排序)。

所以我想通过修改 $watch 来做到这一点。 (我这样做是因为 IRL this.filter 可以被其他元素修改，所以我需要观察那里的变化)。

PS: this.uniqueCars.checkbox 字段是我插入的，只是为了使排序成为可能，所以修改它是安全的。

您可以检查工作Plunker here .

Answer 1

你几乎做对了。
您的 $watch 函数有一个小问题:如果汽车还不是 namesCtrl.filter 的成员，它的 checkbox值已从 namesCtrl.uniqueCars 中删除，因为它未定义。
如果您这样处理这种情况:

$scope.$watch("namesCtrl.filter", function(nv,ov){
  angular.forEach(self.uniqueCars, function(opt){
    var value = nv.cars[opt.element] ? nv.cars[opt.element].checkbox : false;
    opt.checkbox = value;
  });
}, true);

那么您的订单就可以了。除了您还需要按相反顺序按复选框排序:

<li ng-repeat="opt in namesCtrl.uniqueCars | orderBy:['-checkbox','-count']">

参见 working plunker .