Question

我在2列的行中使用ng-repeat显示了一个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中的原始数组。因此，如果您的列表中有ABC书籍，并且如果您搜索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>

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

使用ng-repeat

1 个答案: