অ্যাঙ্গুলার জেএস (AngularJS) টেবিল (Tables)
Article By : Protap Chandra
আজকের টিউটরিয়ালে আমরা শিখব AngularJS এর মাধ্যমে কিভাবে টেবিল তৈরী করতে হয়। টেবিল তৈরীর জন্য ng-repeat ডিরেক্টিভ (directive) ব্যবহার করা যায়। AngularJS ব্যহার করে খুব সহজে ডাটাকে টেবিলে প্রদর্শন করা যায়। একটি উদাহরণের সাহায্যে বিষয়টি পরিস্কার করা যাক।
<div ng-app="" ng-controller="customersController">
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
</div>
<script>
function customersController($scope,$http) {
$http.get("http://www.justetc.com/website/Customers_JSON.php")
.success(function(response) {$scope.names = response;});
}
</script>
উপরের উদাহরণটি একটি ডাটাবেজ থেকে আনা কোম্পানির নাম ও দেশের নাম একটি টেবিলের দুটি কলামে প্রদর্শন করবে। কিন্তু কোনো ভিজ্যুয়াল টেবিল তৈরী হবে না।
ভিজ্যুয়াল টেবিল তৈরী করতে গেলে ওই পেজে 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 ফিল্টার (Filter) ব্যবহার করা যায়: যেমন-
<table>
orderBy : 'Country'">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
এবার ডাটাগুলোর Country কলাম ধরে (a-z) order এ সাজাবে।
আপার কেস (uppercase)ফিল্টার
AngularJS এ uppercase ফিল্টার ব্যবহার করে ডাটাকে capital letter এ লেখা যায়।
যেমন-
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country | uppercase}}</td>
</tr>
</table>
এবার Country কলামের ডাটাগুলো সব capital letter বা বড় হাতের অক্ষরে লেখা হবে।
