angularjs - 角度显示 NG-重复显示

Question

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

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

如果过滤结果中没有内容，我希望整个部分（生产 h4 和表/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-if 获取表格内的内容，检查是否发生 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

也，我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>

如果您有任何问题，请告诉我。