Question

列出的每个字符名称都有一个复选框。 div的内容根据输入搜索框的文本进行更新。

如果我检查＆＃34; Harry＆＃34;在div中，然后输入＆＃34; Tom＆＃34;进入搜索栏，＆＃34; Harry＆＃34;从div中消失。如果我然后在搜索栏内删除文本（＆＃34; Tom＆＃34;），＆＃34; Harry＆＃34;重新出现在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>

Answer 1

要保持复选框的状态，您需要在复选框输入中使用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中看到整个过程。

无论过滤器如何，都显示ng-repeat中的已检查行

1 个答案: