web-dev-qa-db-ja.com

テーブル内の行でng-repeatとng-classを使用する

私はAngularJSを使用していますが、私が取得したい効果は、これが生成するものと似ていますが、それが機能すると仮定すると（機能しません）。

見る

<tr ng-repeat='person in people' ng-class='rowClass(person)'>
  <td>.....info about person...</td>
  <td>.....info about person...</td>
  <td>.....info about person...</td>
</tr>

コントローラ

$scope.rowClass = function(person){
  ...return some value based upon some property of person...
}

personはng-classでは使用できないため、各行内のオブジェクトでのみ使用できるため、このコードは機能しないことがわかります。コードは、私が何をしようとしているかのアイデアを得るためのものです。クラスが行自体のスコープ機能へのアクセスに依存する条件にも基づいているng-repeatを使用して作成されたテーブル行を持つことができるようにしたい。 person。 couldカラムにng-classを追加するだけですが、それは退屈です。誰より良いアイデアがありますか？

angularjsangularjs-ng-repeat
59
oeoeaio

これは実際にうまくいくはずです。同じスコープを共有しているため、人はtr要素とその子で利用可能でなければなりません。

これは私にとってうまくいくようです：

<table>
    <tr ng-repeat="person in people" ng-class="rowClass(person)">
        <td>{{ person.name }}</td>
    </tr>
</table>

http://jsfiddle.net/xEyJZ/

66
jncraton

実際に、あなたはcanあなたが参照しているコンテキストで「人」を使用できます。繰り返されるアイテムとその中のアイテムに存在します。その理由は、特定の要素のディレクティブが同じ$ scopeオブジェクトを共有するためです。 ng-repeatの優先度は1000であるため、すでに$ scopeを作成して「person」を入れているため、ng-classは「person」を使用できます。

このPlnkrを参照してください。

http://plnkr.co/edit/ZI5Pv24U01S9dNoDulh6

8
Jason Aden

通常、私はより包括的な答えを出すのが好きですが、それを行うにはこのビットに関係するコードが多すぎます。だから、最も重要なことだけを示し、これを見ている人がそれをどのように使用するか知っていることを願っています。私の動的JSON配列には列と行の両方がありますが、このビットで重要なのはng-show = "$ last"です。これにより、動的JSON配列の最後の行のみが表示されます。

<tr ng-repeat="row in table.rows" ng-show="$last">

   <td ng-repeat="column in table.cols" ng-show="column.visible == true" nowrap >{{row[column.columnname]}}</td>
</tr>
0
Deathstalker