Javascript 使用ng repeat搜索以行和列显示的数据

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

<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>

{x.name}，{x.type}
{{books[$index+1].name}，{{{books[$index+1].type}}}}`

但是当我使用搜索框时，结果不会正确显示。 有时显示所需数据及其下一个索引，有时在行的两列中显示所需数据，有时根本不显示任何内容。 我应该如何使它正确？

---

提前感谢。

$index指的是筛选结果中的索引，但您正在使用它访问第二个内部div中的原始数组。因此，如果您的列表中有图书A B C，并且如果您搜索A，则筛选结果将有一个项目，但原始图书数组仍有所有三个项目，而B仍将显示，因为图书[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>

{x.name}，{x.type}

---

工作示例：

$index引用了筛选结果中的索引，但您正在使用它访问第二个内部div中的原始数组。因此，如果您的列表中有图书A B C，并且如果您搜索A，则筛选结果将有一个项，但原始图书数组仍有所有三个项，而B仍将出现，因为图书[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>

{x.name}，{x.type}

---

工作示例：

删除

ng if=“$index%2==0”

创建重现问题的plunker演示如果我删除ng，行是否会重复删除

ng if=“$index%2==0”

创建重现问题的plunker演示如果我删除ng，行是否会重复感谢解释。我必须有两列行。如果我对div使用float，那么我应该把ng repeat放在哪里呢？谢谢你的解释。我必须有两列行。如果我对div使用float，那么我应该将ng repeat放在哪里？