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

Question

抱歉这个神秘的标题，但这是一个神秘的问题¯\_(ツ)_/¯

我有 3 个嵌套 ng-repeats 来表示 Google Analytics 的帐户结构。有几个帐户。每个帐户可以有多个属性，其中有多个视图，因此：account -> property -> view。这是 front-end 代码：

  <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个account下有几个properties，每一个下都有view

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

然而，在我当前的实现中，我只能隐藏没有匹配 children 的属性，而不是 non-matching 帐户。例如：

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

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

Answer 1

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

如果有任何 "grandchildren."

，您可能应该检查使用 ng-if 声明

Answer 2

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

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

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

Hide ng-repeat items that don't have matching grandchildren inside two nested ng-repeats

javascript

angularjs

angularjs-ng-repeat

angularjs-filter