Question

我有一个AngularJS项目，其中包含一系列复选框项目。我希望所有选中的复选框位于“加载”（init）的顶部，但是当我使用orderBy过滤器时它将执行orderBy live - 我该怎么办？防止这种情况？

<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/

Answer 1

在这种情况下，请不要在视图上使用orderBy，而是在范围本身中设置视图模型items时对其进行排序。

使用原生排序： -

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

<强> Plnkr

您还可以使用控制器中的orderBy过滤器立即执行排序。

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

<强> Plnkr

这样就可以抽象出控制器本身的逻辑。

Answer 2

您可以这样做：

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

查看t he fiddle

如果您需要求助，您只需添加一个按钮即可触发度假村！

Answer 3

您可以使用BindOnce指令，该指令仅以一种方式将数据绑定到DOM。因此，如果您只是加载数据而不是添加新项目，那么这将起到作用。

见这里：https://github.com/Pasvaz/bindonce

PS：这也会提高angularjs应用的性能。

Answer 4

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

对于这种类型的场景，如果您没有在列表中添加或删除，则一次性绑定会完成该作业。可以找到详细信息here，但基本上使用::语法将列表设置为一次性绑定列表，如下所示：

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

现在，当名称或所选属性的值发生更改时，列表将不会重新排序，但值将在模型中更新。

AngularJS orderby过滤器没有实时更新

4 个答案: