Показывать проверенные строки в ng-repeat независимо от фильтра

0

Каждое из перечисленных имен символов имеет флажок напротив него. Содержимое div обновляется по тексту, введенному в поле поиска.

Если я проверю "Гарри" в div, а затем введите "Том" в строку поиска, "Гарри" исчезнет из div. Если я затем удалю текст ("Том") в строке поиска, "Гарри" снова появится в div. Однако флажок рядом с ним больше не проверяется.

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

Во всех случаях в div должно быть не более 5 записей.

Может кто-нибудь, пожалуйста, посоветуйте мне, как это сделать?

app.js

$scope.characters =  [
    { id: 1, name: "Dexter" },
    { id: 2, name: "Harry" },
    { id: 3, name: "Ronald" },
    { id: 4, name: "Ginny" },
    { id: 5, name: "Tom" },
    { id: 6, name: "Hermione" },
    { id: 7, name: "Severus" },
    { id: 8, name: "Marvolo" },
    { id: 9, name: "Sirius" }
];

page.html

<input type='text' ng-model='searchText' placeholder='Search'>

<div ng-repeat='char in characters | filter: searchText | limitTo: 5'>
    <input type='checkbox' id='{{ char.id }}'>
    <span>{{ char.name }}</span>
</div>
Теги:

1 ответ

2
Лучший ответ

Чтобы сохранить состояние флажка, вам нужно использовать директиву ng-model на вашем флажке:

<input type='checkbox' ng-model="char.checked" id='{{ char.id }}'>

Чтобы проверить элементы вверху, добавьте фильтр orderBy в ng-repeat. Для фильтрации вы можете написать свой собственный фильтр (я помещаю его в контроллер, но вы можете, конечно, добавить его как правильный фильтр):

HTML

<div ng-repeat="char in characters | 
  filter: showCharacter | 
  orderBy: 'checked' | 
  limitTo: 5">

JS (в вашем контроллере)

$scope.showCharacter = function(character) {
  if (character.checked) {
    return true; // Keep element if it is checked
  }
  if (_.startsWith(character.name, $scope.searchText)) {
    return true; // Keep element if it matches search text
  } else {
    return false; // Remove element otherwise
  }
};

Примечание. Я использовал функцию lodash _.startsWith для простоты, вы можете, очевидно, заменить ее любым другим методом для проверки соответствия текста поиска символу.

Вы можете увидеть все это в действии в этом JSBin.

  • 0
    Спасибо за Ваш ответ. Часть orderBy «check», похоже, работает некорректно. Если я проверяю запись, она поднимается вверх, как и ожидалось. Поэтому, если есть несколько проверенных записей, они все поднимаются на вершину, а затем упорядочиваются в соответствии с в порядке по умолчанию, что все хорошо. Однако если я затем снимаю галочку с любой из этих проверенных записей, она поднимается наверх. Это как если бы было три категории - не проверено, проверено и заново не проверено (в порядке возрастания приоритета).
  • 0
    Проблема решена. Проблема заключалась в том, что character.checked не имеет значения по умолчанию. Таким образом, порядок строк стал - «ложь» (недавно не проверено), «истина», «». Чтобы исправить это, я включил следующий оператор, чтобы установить его значение по умолчанию false - if (!character.checked) { character.checked = false; } Затем внутри ng-repeat я изменил orderBy на orderBy: '-checked' . Это сделал это. :-)
Показать ещё 7 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню