AngularJS : Tables
Mahir Koding – Membuat tabel dengan bantuan AngularJS cukup dengan menggunakan ng-repeat terhadap elemen yang ingin diulang (<tr>). Berikut adalah contoh pembuatan table yang dinamis dengan AngularJS. Disini, saya akan mencontohkannya seperti plugin DataTables.
Bagian model untuk searching :
<p>Search : <input type="text" ng-model="keyword"></p>
<thead> <tr> <th><input type="text" ng-model="name"></th> <th> <select ng-model="team" ng-options="team for team in teams"> </select> </th> <th><input type="number" ng-model="goal"></th> <th><button ng-click="insert()">Add</button></th> </tr> <tr> <th>Name</th> <th>Team</th> <th>Goal</th> <th>Action</th> </tr> </thead>
Table Header berisi form input dan column title bagi setiap data.
Coba perhatikan untuk combobox teamnya, disini kita menggunakan directive ng-options untuk pemilihan datanya. Kenapa tidak menggunakan ng-repeat? Apa bedanya? Nah, kalau kita menggunakan ng-options, maka data yang kita select adalah objectnya. Jika menggunakan ng-repeat, kita hanya melakukan looping terhadap isi objectnya saja (string).
More : https://docs.angularjs.org/api/ng/directive/ngOptions
<tbody>
<tr ng-show="filteredData==0">
<td colspan="4">
No Data!
</td>
</tr>
<tr ng-repeat="player in players | filter:{ name:keyword } as filteredData">
<td>{{ player.name }}</td>
<td>{{ player.team }}</td>
<td>{{ player.goal }}</td>
<td><a href="#" ng-click="delete($index)">Delete</a></td>
</tr>
</tbody>
Untuk bagian table body, disini kita bisa membuat sebuah row hidden untuk menampilkan messages ketika datanya kosong. Caranya adalah dengan menggunakan directive ng-show pada kondisi filteredData==0. Variabel filteredData otomatis terupdate sesuai jumlah data yang telah difilter di bagian bawahnya. (perhatikan bagian filter as).
Untuk tombol delete, kita akan mengarahkannya ke function delete dan kita akan passing index arraynya melalui parameter. Function tersebut akan berjalan ketika telah ditrigger oleh directive ng-click.
<script type="text/javascript" >
var app = angular.module("myApps", []);
app.controller("footballController", function($scope){
$scope.players = [
{name:"Hazard", goal:20, team:"Chelsea"},
{name:"Alexis Sanchez", goal:15, team:"Barcelona"},
{name:"Joe Hart", goal:0, team:"Manchester City"},
{name:"Ibrahimovic", goal:17, team:"Manchester United"},
{name:"Lionel Messi", goal:5, team:"Barcelona"},
{name:"Cristiano Ronaldo", goal:24, team:"Real Madrid"},
];
$scope.teams = [
"Chelsea", "Barcelona", "Manchester United", "Manchester City", "Real Madrid", "Arema", "Inter Milan"
];
$scope.insert = function(){
$scope.players.push({
name: $scope.name, team : $scope.team, goal : $scope.goal
});
$scope.clearForm();
};
$scope.clearForm = function(){
$scope.name = ""; $scope.team = ""; $scope.goal = "";
}
$scope.delete = function(index){
$scope.players.splice(index, 1);
}
});
</script>
Untuk menambahkan isi sebuah array, kita bisa menggunakan method .push() disertai object yang ingin dimasukkan ke dalam array players.
Sedangkan untuk function delete, bisa dilakukan dengan method .splice(startindex, count).
Full Code :
<!DOCTYPE html>
<html>
<head>
<title>AngularJS - Tutorial</title>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body ng-app="myApps">
<div ng-controller="footballController">
<p>
Search : <input type="text" ng-model="keyword">
</p>
<table width="50%" border="1" cellpadding="5" cellspacing="0">
<thead>
<tr>
<th><input type="text" ng-model="name"></th>
<th>
<select ng-model="team" ng-options="team for team in teams">
</select>
</th>
<th><input type="number" ng-model="goal"></th>
<th><button ng-click="insert()">Add</button></th>
</tr>
<tr>
<th>Name</th>
<th>Team</th>
<th>Goal</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-show="filteredData==0">
<td colspan="4">
No Data!
</td>
</tr>
<tr ng-repeat="player in players | filter:{ name:keyword } as filteredData">
<td>{{ player.name }}</td>
<td>{{ player.team }}</td>
<td>{{ player.goal }}</td>
<td><a href="#" ng-click="delete($index)">Delete</a></td>
</tr>
</tbody>
</table>
</div>
</body>
<script type="text/javascript" >
var app = angular.module("myApps", []);
app.controller("footballController", function($scope){
$scope.players = [
{name:"Hazard", goal:20, team:"Chelsea"},
{name:"Alexis Sanchez", goal:15, team:"Barcelona"},
{name:"Joe Hart", goal:0, team:"Manchester City"},
{name:"Ibrahimovic", goal:17, team:"Manchester United"},
{name:"Lionel Messi", goal:5, team:"Barcelona"},
{name:"Cristiano Ronaldo", goal:24, team:"Real Madrid"},
];
$scope.teams = [
"Chelsea", "Barcelona", "Manchester United", "Manchester City", "Real Madrid", "Arema", "Inter Milan"
];
$scope.insert = function(){
$scope.players.push({
name: $scope.name, team : $scope.team, goal : $scope.goal
});
$scope.clearForm();
};
$scope.clearForm = function(){
$scope.name = ""; $scope.team = ""; $scope.goal = "";
}
$scope.delete = function(index){
$scope.players.splice(index, 1);
}
});
</script>
</html>
Jika ada pertanyaan yang kurang jelas silahkan berkomentar di bawah. Atau, jika ingin request tutorial juga dapat ke halaman ini. Dukung terus Mahir Koding agar dapat selalu mengupdate artikel dengan share dan like artikel ini. Terima Kasih.
