angularjs - 角度表示 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-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内部で使用されるiv'etbodydiv

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>

ご不明な点がございましたら、お知らせください。