9

セルが多くの行にまたがるAngular.jsを使用してテーブルを作成しようとしています。

例：

http://jsfiddle.net/famedriver/kDrc6/

サンプルデータ

var data = [{Colors: ["red","green","blue"]}]

期待される出力

<table>
  <tr>
    <td rowspan="3">Colors</td>
    <td>red</td>
  </tr>
  <tr>
     <td>green</td>
  </tr>
  <tr>
     <td>blue</td>
  </tr>
 </table>

ng-showディレクティブを使用して動作させています。しかし、それでも余分なセルが表示され、非表示になります。テーブルを適切にレンダリングすることが理想的です。

ng-switch、前述のように、厳密な解析を行う特定の要素では機能しません（つまり、特定のタグのみを許可するテーブル）

何かアドバイス？

4

2 に答える 2

6

通常、このようなものにはng-switchを使用できます。これは、単に物事を非表示/表示するng-show / ng-hideとは異なり、DOMから条件付きで物事を追加/削除します。

ただし、ng-switchは、switchステートメントに追加の要素が必要なため、テーブルではうまく機能しません。

幸いなことに、誰かが「if」と呼ばれるディレクティブを作成しました。これは、要素の1つの属性を取得し、条件付きでそれをDOMに追加/削除します。それは天才です:-)。

これがその例です（側面の[リソース]パネルを見てください。githubから含めました）。http://jsfiddle.net/5zZ7e/。

また、グローバル変数を使用せずにコントローラーを作成する方法も示しました。

于 2012-07-07T14:18:53.483 に答える
1

最新バージョンのAngularを使用して質問に回答します。

Andrew Joslinが書いたように、ng-showは要素を非表示にします（適用されますdisplay: none）。ng-switchは、一致しない要素を単に非表示にするのではなく、削除します。switch-whenただし、表現には追加の要素も必要です。

最後の回答以降、ng-ifがAngularの一部になった場合、外部ライブラリは不要になります。

(function(win) {
  angular.module('myApp', [])
    .controller("Tester", function($scope) {
      $scope.data = {
        Colors: ["red", "green", "blue"]
      }
    })
}(window));
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="myApp">
  <h1>old code converted</h1>
  <p>Just converted to a newer AngularJS.</p>
  <table border="1" ng-controller="Tester">
    <tbody ng-repeat='(what,items) in data'>
      <tr ng-repeat='item in items'>
        <td rowspan="{{items.length}}" ng-show="$first">{{what}}</td>
        <td>{{item}}</td>
      </tr>
    </tbody>
  </table>
  <h1>solution via ng-if</h1>
  <table border="1" ng-controller="Tester">
    <tbody ng-repeat='(what,items) in data'>
      <tr ng-repeat='item in items'>
        <td rowspan="{{items.length}}" ng-if="$first">{{what}}</td>
        <td>{{item}}</td>
      </tr>
    </tbody>
  </table>
</div>

于 2015-04-25T07:49:34.287 に答える