AngularJs - <ul><li> 選中其復選框時，元素到頂部

Question

這個問題基於前一個問題

我有這樣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}
];

並且視圖中的已檢查項目將轉到this.filter （我將其用於其他目的）

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

所以我想要實現的是在視圖中訂購復選框列表，因此當選中其中一個項目時，它會轉到頂部，類似這樣的

為了做到這一點，我有一個像這樣的$watch

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

但是當按復選框值排序時行為非常不一致（當第一次點擊它完成作業時，OK，但是當取消它時不起作用，再次點擊它時會以相反的方式對其進行排序）。

所以我想通過修改$watch來做到這一點。 （我這樣做就像IRL this.filter可以被其他元素修改，所以我需要觀察那里的變化）。

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

你可以在這里檢查工作的Plunker 。

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']">

見工作的plunker 。

Answer 2

為什么你不能修改checkbox屬性本身？ 將輸入的模型更改為opt.checkbox並注釋注意使一切正常。 我認為這種方式更好。

但是您可以將opt.checkbox = nv.cars[opt.element]修改為opt.checkbox = !!nv.cars[opt.element]以使其工作（ cars對象中的checkbox屬性undefined ，這違反了正確的順序）。