با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش آموزش AngularJS را دنبال می کنند. پس از برررسی کامل سرویس های مهم AngularJS، در ادامه سری آموزشهای AngularJS در این بخش قصد داریم که به مباحث چگونگی کار با Tables یا جداول در AngularJS ، بپردازیم. در این آموزش شما را با مباحثی از جمله ورود داده در جداول ، تغییر Style جداول و مرتب سازی داده ها در جداول AngularJS ، آشنا خواهیم کرد.
قبل از مرور آموزش فوق، ابتدا شما باید چگونگی ایجاد و کار با جداول را در html بدانید. چراکه در این آموزش باید جدولی در کد html از قبل، طراحی کرده باشید تا بتوانیم کدهای AngularJS را روی آن اجرا کنیم.
دستور ng-repea
برای نمایش و کار با جداول در AngularJS ، مناسب است.
نمایش جداول در آنگولار بسیار ساده است:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <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 را به جدول اضافه کنید:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <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> |
1 2 3 4 5 6 | <table> <tr ng-repeat="x in names | orderBy : 'Country'"> <td>{{ x.Name }}</td> <td>{{ x.Country }}</td> </tr> </table> |
1 2 3 4 5 6 | <table> <tr ng-repeat="x in names"> <td>{{ x.Name }}</td> <td>{{ x.Country | uppercase }}</td> </tr> </table> |
برای نمایش index جدول، از یک تگ <td>
به همراه سرویس $index استفاده کنید:
1 2 3 4 5 6 7 | <table> <tr ng-repeat="x in names"> <td>{{ $index + 1 }}</td> <td>{{ x.Name }}</td> <td>{{ x.Country }}</td> </tr> </table> |
استفاده از سرویس های $even
و $odd
$even
و $odd
1 2 3 4 5 6 7 8 | <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> |
در آموزش فوق که با عنوان کار با Tables یا جداول در AngularJS ، ارائه گردید. شما را با دستکاری داده ها ی جداول از جمله مرتب سازی و تغییر فرمت آن ها در AngularJS ، آشنا کردیم. امیدواریم که از مباحث فوق به خوبی استفاده کرده باشید.