3

次のコードで動的に生成されたテーブルがあります。

<tbody>
    <tr ng-repeat="row in tableType.data.rows track by $index">
        <td ng-repeat="col in row track by $index" class={{getUnitCountCellColor(col)}}>{{col}}</td>
    </tr>
</tbody>

テーブルが反復されるデータは次のようになります。

[["69123", 20, 20, 40, 0, 0, 0, 0, 20, 20, 20, 0, 20, 20, 0, 20],
 ["69121", 20, 20, 40, 0, 0, 0, 20, 20, 40, 20, 0, 20, 20, 0, 20],
 ["69124", 20, 20, 40, 0, 0, 0, 0, 0, 0, 20, 0, 20, 0, 0, 0],
 ["69221", 20, 20, 40, 20, 0, 20, 0, 0, 0, 20, 0, 20, 20, 20, 40]
]

ご覧のとおり、データはネストされた配列です。現在、親コントローラースコープで定義されているメソッドgetUnitCountCellColor()を呼び出して、その値に基づいて各セルの色を設定しようとしています。

このメソッドは単に値を取得し、その値に基づいてカラー クラスを文字列として返します。(例: 危険、成功)

現在、値'undefined'で 4 回だけ呼び出されています。

私はこれをng-classで次のように実装しようとしました:

<td ng-repeat="col in row track by $index" ng-class="getUnitCountCellColor(col)">{{col}}</td>

しかし、そのメソッドはまったく呼び出されません。

現在のコードのエラーを指摘するか、別のより良いアプローチで、この機能を実装するのを手伝ってください。

ありがとう、

4

1 に答える 1

1

を使用ng-classするとうまくいくはずです。

<td ng-repeat="col in row track by $index" ng-class='getUnitCountCellColor(col)'>{{col}}</td>

これは、すべてのゼロを赤く着色するデモです。

アップデート

したがって、テーブルはディレクティブにあり、cell-color メソッドはコントローラーにあります。getUnitCountCellColor関数をディレクティブに渡すことができます。

<count-table table-type='tableType' 
get-unit-count-cell-color='getUnitCountCellColor(col)'>
</count-table>

ディレクティブのスコープは次のようになります。

scope: {
  tableType:'=tableType',
  getUnitCountCellColor: '&'
}

ディレクティブ テンプレートは次のようになります。

<td ng-repeat="col in row track by $index" 
ng-class="getUnitCountCellColor({col: col})">{{col}}
</td>

更新されたプランカー

于 2014-06-11T14:25:10.517 に答える