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中的值为true，则插入到DOM声明中的ng-if将显示DOM，否则将隐藏它。

如果有任何“孙子”，您应该使用ng-if声明进行检查。

隐藏两个嵌套的ng-repeats中没有匹配的孙子的重复项

2 个答案: