使用 ng-repeat 搜索以 2 列显示的行数据

Question

我使用 ng-repeat 在 2 列的行中展示了一个 JSON 数据。我还有一个搜索框来过滤所需的数据。我的代码如下：

<input type="text" ng-model="search" />
<div class="row" ng-repeat="x in books | filter:search" ng-if="$index%2==0">
    <div class="col" > 
        {{x.name}}  , {{x.type}} 
    </div>
    <div class="col" > 
        {{books [$index+1].name}}  , {{books [$index+1].type}} `  `   
    </div>
</div>

但是当我使用搜索框时，结果无法正确显示。 有时它会同时显示所需的数据及其下一个索引，有时它会在一行的两列中显示所需的数据，有时它什么也不显示。 我应该如何使它正确？ 提前致谢。

Answer 1

$index 指的是 过滤结果 中的索引，但您使用它来访问第二个内部 div 中的 原始数组。因此，如果您的列表中有书籍 A B C，并且如果您搜索 A，则过滤结果将有一项，但原始书籍数组仍然包含所有三项，并且 B 仍然会出现，因为 books[1] 是 B。

您能否将 ng-repeat 放在内部 div 上，而不是使用行和列，并将它们包装在一个容器中，从而为您提供所需的宽度？如果内部 div 使用 float: left 或 display: inline-block，如果容器的宽度合适，您将获得一个两列的列表。

<div class="books-container">
    <div class="book" ng-repeat="x in books | filter:search"> 
        {{x.name}}  , {{x.type}} 
    </div>
</div>

工作示例：https://plnkr.co/edit/MG4do0kqV8wk0nk9tlKJ?p=preview