مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش آموزش AngularJS را دنبال می کنند. پس از برررسی کامل سرویس های مهم AngularJS، در ادامه سری آموزشهای AngularJS در این بخش قصد داریم که به مباحث چگونگی کار با Tables یا جداول در AngularJS ، بپردازیم. در این آموزش شما را با مباحثی از جمله ورود داده در جداول ، تغییر Style جداول و مرتب سازی داده ها در جداول AngularJS ، آشنا خواهیم کرد.
قبل از مرور آموزش فوق، ابتدا شما باید چگونگی ایجاد و کار با جداول را در html بدانید. چراکه در این آموزش باید جدولی در کد html از قبل، طراحی کرده باشید تا بتوانیم کدهای AngularJS را روی آن اجرا کنیم.
کار با Tables یا جداول در 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 در جدول، یک کد 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> |
نمایش جدول بعد از استفاده از فیلتر مرتب سازی
مثال :
| <table> <tr ng-repeat="x in names | orderBy : 'Country'"> <td>{{ x.Name }}</td> <td>{{ x.Country }}</td> </tr> </table> |
استفاده از فیلتر uppercase در جدول
مثال :
| <table> <tr ng-repeat="x in names"> <td>{{ x.Name }}</td> <td>{{ x.Country | uppercase }}</td> </tr> </table> |
نمایش index جدول
برای نمایش index جدول، از یک تگ <td> به همراه سرویس $index استفاده کنید:
مثال :
| <table> <tr ng-repeat="x in names"> <td>{{ $index + 1 }}</td> <td>{{ x.Name }}</td> <td>{{ x.Country }}</td> </tr> </table> |
استفاده از سرویس های $even و $odd
مثال :
| <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 ، آشنا کردیم. امیدواریم که از مباحث فوق به خوبی استفاده کرده باشید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
