Question

在我的应用程序中，我有一个这样的结构：

[ ["section title", [{ item }, { item } ... ]],
  ["section title", [{ item }, { item } ... ]], ... and so on

在我看来，我将这些部分放在面板中，将它们的内部列表放在列表中：

<div class="panel panel-default" ng-repeat="section in index">
  <div class="panel-heading"><strong>{{section[0]}}</strong></div>
  <ul class="list-group">
    <li class="list-group-item" ng-repeat="item in section[1]">
        ... item view here

但现在我想添加搜索，我希望搜索结果只包含内部数组中的项目。我可以在顶层放置一个过滤功能...

ng-repeat="section in index | filter:matching()"

并让matching()函数在与搜索匹配的部分中生成一个项目的平面列表，但html设置为处理分段结构，而不是平面列表。我该怎么办？

让我的过滤器在截面结构中产生结果，有时是空的部分（没有项目匹配），然后隐藏空的部分？

以某种方式在html中修复它，就像这样......

<div ng-if="searchText">
    --- I don't know what goes here
</div>
<div ng-if="!searchText">
    --- same as above

这第二个想法对我来说似乎很糟糕。

有点聪明（希望）我缺少

感谢。

Answer 1

理论上，以下代码应该适合您（它对我有用）

<div class="panel panel-default" ng-repeat="section in index | filter:matching()">
  <div class="panel-heading" ng-if="!searchText"><strong>{{section[0]}}</strong></div>
  <ul class="list-group">
    <li class="list-group-item" ng-repeat="item in section[1]">
        ... item view here

虽然这会创建多个div和ul标签，但您始终可以使用此

<ul class="list-group">
    <li ng-repeat-start="section in index | filter:matching()" style="display:none"></li>
    <li class="list-group-item" ng-repeat="item in section">
        ... item view here
    </li>
    <li ng-repeat-end style="display:none"></li>
</ul>

过滤嵌套数组

1 个答案: