角度jsテーブル奇数カラムデータの問題

私は角度JSに新しく、奇妙な/背景色を変えるためにテーブルに取り組んでいますが、いくつかの課題に直面しています。角度jsテーブル奇数カラムデータの問題

はここに私のコード私が取得しています

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

出力であることは望ましくない、奇妙な国のデータが空白に来ています。

出典

2017-06-27 coders.heaven.july

が不足しているためにあなたがCSSでこれを行うことができると思う： - TR：n番目の子（奇数）{背景色：#CCC ; } – Vivz

コードの下を使用し、私はコラム国奇数条件が

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

出典

2017-06-27 10:05:43

ありがとう、これは助ける –

あなたはほとんど歓迎:) –

CSSを使用すると、はるかにシンプルでクリーンなコードを作成できます。

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

基本的な背景色を定義し、奇数/偶数を使用することもできます。

出典

2017-06-27 09:48:59 Shaniqwa

ありがとう、これは –

背景色の変更にCSSを使用できます。

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

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

あなたのデータが適切に来ていない理由は、あなたが奇数列のスタイルを適用するためにng-if="$odd"を使用しているということです。

したがって、HTMLを次のように変更し、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>

出典

2017-06-27 09:50:44 Vivz

返信ありがとうございました –

あなたはようこそ。 :) – Vivz

角度jsテーブル奇数カラムデータの問題

答えて

関連する問題