web-dev-qa-db-fra.com

Utilisation de ng-repeat et de ng-class sur des lignes à l'intérieur d'une table

J'utilise AngularJS et l'effet que je veux obtenir serait similaire à ce que cela produirait, à condition que cela fonctionne (ce qui n'est pas le cas).

Vue

<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>

Manette

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

Je me rends compte que ce code ne fonctionnera pas car person n'est pas disponible pour ng-class car il ne sera disponible que pour les objets de chaque rangée. Le code consiste à comprendre ce que j'essaie de faire: c.-à-d. Je veux pouvoir avoir des lignes de table créées avec ng-repeat dont la classe est également basée sur une condition qui dépend de l'accès à la fonction de portée de la ligne elle-même, par exemple. person. Je me rends compte que je pourrais ajouter simplement ng-class sur les colonnes, mais c'est ennuyeux. Quelqu'un a-t-il de meilleures idées?

angularjsangularjs-ng-repeat
59
oeoeaio

Cela devrait effectivement bien fonctionner. Personne doit être disponible sur l'élément tr, ainsi que sur ses enfants, car ils partagent le même champ d'application.

Cela semble bien fonctionner pour moi:

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

http://jsfiddle.net/xEyJZ/

66
jncraton

En fait, vous pouvez utiliser "personne" dans le contexte auquel vous faites référence. Il existe sur l'élément en cours de répétition, ainsi que sur tous les éléments qu'il contient. La raison en est que toutes les directives sur un élément particulier partagent le même objet $ scope. ng-repeat a une priorité de 1000, il a donc déjà créé sa portée $ et y a inséré "personne". Par conséquent, "personne" est disponible pour ng-class.

Voir cette Plnkr:

http://plnkr.co/edit/ZI5Pv24U01S9dNoDulh6

8
Jason Aden

Normalement, j'aime bien donner une réponse plus complète, mais il y a trop de code impliqué dans cette partie pour le faire. Je vais donc simplement montrer ce qui est le plus important et espérer que quiconque s’y intéressera sait comment l’utiliser. Mon tableau JSON dynamique contient à la fois des colonnes et des lignes, mais l'élément principal de ce bit est ng-show = "$ last". Cela ne doit afficher que la dernière ligne du tableau JSON dynamique.

<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