AngularJS テーブル
- 前のページ AngularJS Http
- 次のページ AngularJS ショートカット
ng-repeat 指示子はテーブルの表示に非常に適しています。
テーブルにデータを表示
AngularJS を使用してテーブルを表示するのは非常に簡単です:
AngularJS インスタンス
<div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names"> <td>{{ x.Name }}</td> <td>{{ x.Country }}</td> </tr> </table> </div> <script> var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope, $http) { $http.get("customers.php") .then(function (response) {$scope.names = response.data.records;}); }); </script>
CSS スタイルを使用して表示
ページに美しさを加えるために、以下の CSS を追加できます:
CSS スタイル
<style> table, th , td { border: 1px solid grey; border-collapse: collapse; padding: 5px; } table tr:nth-child(odd) { background-color: #f1f1f1; } table tr:nth-child(even) { background-color: #ffffff; } </style>
orderBy フィルタを使用して表示
テーブルのソートを行うには、以下のタグを追加してください: orderBy
フィルタ:
AngularJS 例
<table> <tr ng-repeat="x in names | orderBy : 'Country'"> <td>{{ x.Name }}</td> <td>{{ x.Country }}</td> </tr> </table>
uppercase フィルタを使用して表示
大文字で表示するには、以下のタグを追加してください: uppercase
フィルタ:
AngularJS 例
<table> <tr ng-repeat="x in names"> <td>{{ x.Name }}</td> <td>{{ x.Country | uppercase }}</td> </tr> </table>
インデックスを表示する($index)
テーブルのインデックスを表示するには、以下のタグを追加してください: $index
の <td>:
AngularJS 例
<table> <tr ng-repeat="x in names"> <td>{{ $index + 1 }}</td> <td>{{ x.Name }}</td> <td>{{ x.Country }}</td> </tr> </table>
$even と $odd の使用
AngularJS 例
<table> <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>
- 前のページ AngularJS Http
- 次のページ AngularJS ショートカット