Cara Membuat Table dengan Angular JS

Lebih baik mendengarkan kebenaran meski itu amat menyakitkan, Kawan. Dibandingkan mendengarkan kebohongan meski itu menyenangkan. Oke kesempatan kali ini saya akan berbagi ilmu kepada kalian tentang bagaimana Cara Membuat Table dengan Angular JS.

Untuk pembuatan table pada Angular JS ini menggabungkan Angular JS dengan CSS ya teman-teman.
Penampakan nya seperti ini teman-teman:

Oke langsung saja, berikut Cara Membuat Table dengan Angular JS.

Seperti biasa, siapkan file index.html nya.

Kemudian, kita hubungkan terlebih dahulu file HTML kita dengan library Angular nya ya teman-teman.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

Dan setelah itu, isi di bagian <body> tag-tag berikut.

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

Selanjutnya, isi untuk bagian CSS nya.

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

Dan yang terakhir, isi untuk script menampilkan file-file ke dalam table tersebut.

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

Bagaimana teman-teman? Cukup mudah bukan?

Sekian untuk tutorial kali ini tentang bagaimana Cara Membuat Table dengan Angular JS.

Semoga bermanfaat, terima kasih

Kategori