Cara Membuat Table dengan Angular JS
Lebih bagus mendengarkan kebenaran meski itu amat menyakitkan, Kawan. Diperbandingkan mendengarkan kebohongan meski itu menyenangkan. Oke kesempatan kali ini saya akan berbagi ilmu kepada kalian mengenai bagaimana Cara Merancang Table dengan Angular JS.
Bagi perancangan table di Angular JS ini menggabungkan Angular JS dengan CSS ya teman-teman.
Penampakan nya seperti ini teman-teman:
Oke seketika saja, berikut Cara Merancang Table dengan Angular JS.
Seperti lazimnya, 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>
Berikutnya, isi bagi 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 bagi script menampilkan file-file ke pada 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? Lumayan gampang bukan?
Demikian bagi panduan kali ini mengenai bagaimana Cara Merancang Table dengan Angular JS.
Semoga bermanfaat, terima kasih
Sumber https://kursuswebsite.org
