在两个嵌套的 ng-repeat 中隐藏没有匹配孙子的 ng-repeat 项目

Question

抱歉标题含糊不清，但这是个含糊不清的问题¯\_(ツ)_/¯

我有 3 个嵌套的 ng-repeats 来表示 Google Analytics（分析）的帐户结构。有几个帐户。每个帐户可以有多个属性，具有多个视图，因此：account -> property -> view。这是前端代码：

  <div class="form-group">
    <div class="input-group">
      <label>Search for an estate by name or ID</label>
      <input type="text" class="form-control" ng-model="search" search-box="" />
    </div>
  </div>
  <div ng-repeat="ac in accounts track by ac.id">
    <h5>{{ac.name}} — <code>{{ac.id}}</code>
      </h5>
    <div class="well well-sm">
      <div ng-repeat="prop in ac.properties track by prop.id" ng-show="filteredViews.length > 0">
        <h6> – {{prop.name}} — <code>{{prop.id}}</code>
          </h6>
        <ul class="list-group">
          <li class="list-group-item" ng-repeat="view in prop.views | viewFilter:search as filteredViews track by view.id">
            <label>
              <input type="checkbox" checklist-model="selectedEstates" checklist-value="view" /> {{view.name}} — <code>{{view.id}}</code>
            </label>
          </li>
        </ul>
      </div>
    </div>
  </div>

这张图片是使用随机生成的层次结构渲染时的样子。您可以看到，在 2 个帐户下有几个属性，每个属性下都有视图。

上面有一个搜索栏。这个想法是让用户能够通过视图名称或视图 ID 进行搜索。当用户键入时，应仅保留具有匹配视图的帐户和属性。其余的应该隐藏。

但是，在我当前的实现中，我只能隐藏没有匹配子项的属性，不是不匹配的帐户。例如：

我的问题是，如何隐藏没有匹配视图的帐户（孙子）？

PLUNKER：https://plnkr.co/edit/hvicwa5slPJlpGOfoitn?p=preview

Answer 1

您可以在属性上再使用一个过滤器来实现这一点。希望对你有帮助

Plunker：https://plnkr.co/edit/EOP3rDT92z2tez4gblsg?p=preview

app.filter('propFilter', function() {
return function(prop, searchTerm) {

  var filteredProps = [];

  for (var k = 0; k < prop.length; k++) {
  var estates =  prop[k].views
  for (var i = 0; i < estates.length; i++) {
    var view = estates[i];

    if (~view.name.toUpperCase().indexOf(searchTerm.toUpperCase()) || ~view.id.toUpperCase().indexOf(searchTerm.toUpperCase())) {
      filteredProps.push(prop[k]);
      break;
    }
  }
  }

 return filteredProps;
}

Answer 2

通常，您可以使用ng-if 指令来隐藏 DOM 元素。 ng-if 插入到 DOM 声明中，如果 ng-if 中的值为 true，则 DOM 将显示，否则隐藏。

您可能应该使用ng-if 声明检查是否有任何“孙子”。