角度显示NG重复显示

Question

我有以下代码在页面上显示3种不同的类型：

1. 生产
2. 开发
3. 维护

如果filteredResults中没有内容，我希望整个部分（Production h4和table / tbody）消失。 （仅在有内容时才会出现）

    <span ng-repeat="type in types">
      <table class="max-width">
        <tbody>
          <div class="row" ng-repeat="result in filteredResults = (results | filter:search) | filter: status('status', type)">
            <div class="left-header-padding" ng-if="$index==0">
              <tr class="pull-left">
                <h4 class="title">{{type.charAt(0).toUpperCase() + type.substring(1)}}</h4>
              </tr>
            </div>
          </div>
        </tbody>
      </table>
    </span>

我正在尝试ng - 如果对于表格内的内容，检查ng-repeat是否发生并且仅渲染ng-repeat中是否有内容，但我希望整个部分（包括表格）在有无内容。有谁知道如何做到这一点？

Answer 1

如果你想隐藏表把ng-show放到表标签中，即：

<table class="max-width" ng-show="filteredResults.length >0">
    <tbody>
        <div class="row" ng-repeat="result in filteredResults = (results | filter:search) | filter: status('status', type)">
            <div class="left-header-padding">
                <tr class="pull-left">
                     <h4 class="title">{{type}}</h4>

                </tr>
            </div>
        </div>
    </tbody>

Answer 2

将ng-show="filteredResults.length"添加到您的table元素

<table ... ng-show="filteredResults.length">

示例：http://plnkr.co/edit/WFQzRtXFe3UnvuzA8psa?p=preview

也，iv tr在tbody内使用而不是div

Answer 3

尝试使用ng-init创建本地过滤集合，如果过滤集合中没有项目，请使用ng-if语句隐藏表格。

   <div ng-repeat="type in types">
     <div ng-init="filteredResults = (results | filter:search) | filter: status('status', type)">
         <table class="max-width" ng-if="filteredResults.lenght > 0">
            <tbody>
              <div class="row" ng-repeat="result in >
                <div class="left-header-padding" ng-if="$index==0">
                  <tr class="pull-left">
                    <h4 class="title">{{type.charAt(0).toUpperCase() + type.substring(1)}}</h4>
                  </tr>
                </div>
              </div>
            </tbody>
          </table>
        </div>
      </div>

如果您有任何问题，请与我们联系。