Каждое из перечисленных имен символов имеет флажок напротив него. Содержимое 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>
Чтобы сохранить состояние флажка, вам нужно использовать директиву 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.
character.checked
не имеет значения по умолчанию. Таким образом, порядок строк стал - «ложь» (недавно не проверено), «истина», «». Чтобы исправить это, я включил следующий оператор, чтобы установить его значение по умолчанию false -if (!character.checked) { character.checked = false; }
Затем внутриng-repeat
я изменил orderBy наorderBy: '-checked'
. Это сделал это. :-)