2 votes

problème de données de colonnes impaires dans un tableau angular js

Je suis novice en matière d'angular JS et je travaille sur un tableau permettant de changer la couleur d'arrière-plan de façon impaire ou paire, mais je suis confronté à certains problèmes.

Voici mon code

<!DOCTYPE html>
<html>
<style>
table, td  {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="customersCtrl"> 

<table>
<tr> <td style="background-color:green">Name</td> <td style="background-color:green">Country</td></tr>  
  <tr ng-repeat="x in names">
    <td ng-if="$odd" style="background-color:#f1f1f1">
    {{ x.Name }}</td>
    <td ng-if="$even">
    {{ x.Name }}</td>
    <td ng-if="$odd" style="background-color:#f1f1f1">
    {{ x.Country }}</td>
  </tr>
</table>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("http://localhost:8080/getCustomer")
    .then(function (response) {$scope.names = response.data.records;});
});
</script>

</body>
</html>

Le résultat que j'obtiens n'est pas souhaitable, les données sur les différents pays sont vides.

1voto

Shaniqwa Points 518

Vous pouvez le faire avec un code CSS beaucoup plus simple et propre.

table tr:nth-child(odd) td{
  //your style
}
table tr:nth-child(even) td{
}

Vous pouvez également définir la couleur d'arrière-plan de base et n'utiliser que les couleurs impaires et paires.

1voto

Vivz Points 6127

Vous pouvez utiliser le CSS pour changer la couleur de l'arrière-plan.

<style>
table, td  {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}

tr:nth-child(odd) { background-color: #f1f1f1; }
</style>

La raison pour laquelle vos données n'arrivent pas correctement est que vous avez utilisé ng-if="$odd" pour appliquer des styles aux colonnes impaires.

Changez donc votre HTML de la façon suivante et ajoutez la couleur de fond à partir de CSS.

  <table>
    <tr> <td style="background-color:green">Name</td> <td style="background-color:green">Country</td></tr>  
      <tr ng-repeat="x in names">
        <td>
        {{ x.Name }}</td>
        <td>
        {{ x.Name }}</td>
        <td>
        {{ x.Country }}</td>
      </tr>
    </table>

1voto

Prasad Kamdi Points 184

Utilisez le code ci-dessous, je pense que pour la colonne pays, la condition étrange est manquante.

<table>
<tr> <td style="background-color:green">Name</td> <td style="background-color:green"> Country</td></tr> 
  <tr ng-repeat="x in names">
    <td ng-if="$odd" style="background-color:#f1f1f1">
    {{ x.Name }}</td>
    <td ng-if="$even">
    {{ x.Name }}</td>
    <td ng-if="$odd" style="background-color:#f1f1f1">
    {{ x.Country }}</td>
    <td ng-if="$even">
    {{ x.Country }}</td>
  </tr>
</table>

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X