2014-09-30 121 views
0

我有一个AngularJS项目与复选框项目列表..我想要所有选中的复选框在“负载”(init)的顶部,但是当我使用orderBy过滤器它会做orderBy live - 我该如何预防?AngularJS orderby过滤没有实时更新

<div ng-app> 
    <div ng-controller="FooController"> 
     <div ng-repeat="item in items|orderBy:'selected':true"><input type="checkbox" ng-model="item.selected" /> {{item.desc}}</div> 
    </div> 
</div> 

function FooController($scope) { 
    $scope.items = [ 
     {desc: 'test1', selected: false}, 
     {desc: 'test2', selected: true}, 
     {desc: 'test3', selected: false}, 
     {desc: 'test4', selected: false}, 
     {desc: 'test5', selected: false}, 
     {desc: 'test6', selected: false}, 
     {desc: 'test7', selected: true}, 
     {desc: 'test8', selected: false}, 
     {desc: 'test9', selected: false}, 
     {desc: 'test10', selected: false}, 
    ]; 
} 

在这里看到的jsfiddle - http://jsfiddle.net/a4uwz9aw/1/

+0

你的意思是当你选择一个复选框时,你不希望他们再次订购? http://plnkr.co/edit/Dsug5X?p=preview – PSL 2014-09-30 13:28:38

+1

你为什么不首先在控制器中对'items'数组进行排序呢? – 2014-09-30 13:31:44

回答

3

在这种情况下,不要在视图中使用排序依据,当你在范围自身设置视图模型items,而不是对其进行排序。

使用本机排序: -

$scope.items = items.sort(function(itm1, itm2){ 
     return itm1.selected < itm2.selected ? 1:-1; 
    }); 

Plnkr

您还可以使用排序依据过滤器的控制器进行排序一次。

$scope.items = orderByFilter(items, "selected", true); 

Plnkr

这样,你抽象出在控制器本身的逻辑。在t he fiddle

<span ng-init="test=(items|orderBy:'selected':true) "></span> 

看,如果你需要求助于,你可以简单地添加一个按钮来触发度假村:

+0

正是我所需要的 - 谢谢..使用orderByFilter;) – pkdkk 2014-09-30 13:48:47

+0

@pkdkk不客气.. :) – PSL 2014-09-30 13:54:48

2

你可以做这样的事!

+0

请解释如何触发度假村。 – dude 2015-08-03 10:04:22

+0

你可以这样做:'',然而,这给模板带来了太多的逻辑品味,你应该考虑PSL的答案,并在控制器中完成。如果你需要保持始发阵列的机智。只需将其排序为一个新数组,然后在模板中使用它。 – 2015-08-04 05:54:40

0

您可以使用只将数据绑定到DOM的BindOnce指令。所以,如果你只是加载数据,而不是添加新的项目,这将做到这一点。

在这里看到:https://github.com/Pasvaz/bindonce

PS:这也增加了你的angularjs应用程序的性能。

0

我知道这是一个古老的问题,但是因为我从Google搜索来到这里并且有完全相同的用例,我想我会添加一个答案。

对于这种类型的场景,如果您不是从列表中添加或从列表中删除一次性绑定来完成这项工作。详情可参阅here,但基本上使用::语法像这样设置列表作为一次性绑定列表:

<md-list-item ng-repeat="user in ::users | orderBy: ['-selected', 'name']"> 

现在,当名称或所选属性的值更改列表不会重新排序,但值会在您的模型中更新。