javascript - 隐藏两个嵌套 ng-repeats 内没有匹配孙子项的 ng-repeat 项目

Question

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

我有 3 个嵌套的 ng-repeats 来表示 Google Analytics(分析)的帐户结构。有几个帐户。每个帐户可以有多个属性，这些属性有多个 View ，因此:帐户 -> 属性 -> 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 个帐户下有多个属性，每个属性下都有 View 。

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

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

我的问题是，如何隐藏没有匹配 View 的帐户(孙子)？

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

Answer 1

您可以使用属性上的另一个过滤器来实现此目的。希望这对您有帮助

笨蛋: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;
}