Фильтр порядка AngularJS без обновления в реальном времени

У меня есть проект AngularJS со списком элементов флажка. Я хочу, чтобы все выбранные флажки вверху были «загружены» (инициализация), но когда я использую фильтр orderBy, он будет выполнять 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/


angularjs angularjs-ng-repeat angularjs-filter
person pkdkk    schedule 30.09.2014    source источник
comment
Вы имеете в виду, когда вы устанавливаете флажок, вы не хотите, чтобы они заказывались снова? plnkr.co/edit/Dsug5X?p=preview   -  person PSL    schedule 30.09.2014
comment
почему бы вам изначально не отсортировать массив items в контроллере?   -  person Lorenzo Marcon    schedule 30.09.2014

Ответы (4)


arrow_upward
3
arrow_downward

В этом случае не используйте 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

Таким образом вы абстрагируете логику в самом контроллере.

person PSL    schedule 30.09.2014
comment
Как раз то, что мне было нужно - спасибо.. воспользовался orderByFilter ;) - person pkdkk; 30.09.2014

arrow_upward
2
arrow_downward

Вы можете сделать что-то вроде этого:

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

посмотрите на скрипку

если вам нужно прибегнуть, вы можете просто добавить кнопку, чтобы вызвать прибежище!

person Sander Elias    schedule 30.09.2014
comment
Пожалуйста, объясните, как вызвать курорт. - person dude; 03.08.2015
comment
можно сделать так: <button ng-click="test=(items|orderBy:'selected':true)">resort</button>, Однако, на мой вкус, это слишком много логики в шаблон вкладывает, надо учитывать ответ от PSL, и делать это в контроллере. Если вам нужно сохранить исходный массив в такт. просто отсортируйте в новый массив и используйте его в своем шаблоне. - person Sander Elias; 04.08.2015

arrow_upward
0
arrow_downward

Вы можете использовать директиву BindOnce, которая привязывает данные к DOM только одним способом. Так что, если вы только загружаете данные и не добавляете новые элементы, это поможет.

см. здесь: https://github.com/Pasvaz/bindonce

PS: это также увеличивает производительность ваших приложений angularjs.

person skewl84    schedule 30.09.2014

arrow_upward
0
arrow_downward

Я знаю, что это старый вопрос, но, поскольку я попал сюда из поиска Google и у меня был точно такой же вариант использования, я решил добавить ответ.

Для этого типа сценария вы, если вы не добавляете или не удаляете из списка, одноразовая привязка выполняет эту работу. Подробности можно найти здесь, но в основном установите список как один список с привязкой ко времени с использованием синтаксиса ::, например:

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

Теперь при изменении значений имени или выбранных свойств список не будет пересортировываться, но значения будут обновляться в вашей модели.

person Sherwin F    schedule 20.09.2017