پیشنهاد می‌شود قبل از ورود به این جلسه سایر قسمت‌های آموزش انگولار جی اس را نیز مطالعه فرمایید. در این قسمت به بررسی پر کردن خانه‌های جدول توسط انگولار جی اس خواهیم پرداخت. جداول کاربردها و اهمیت‌های بسیاری دارند. در انگولار جی اس به‌سادگی می‌توانید جداول را مدیریت کنید. پس تا انتهای این آموزش با ما همراه باشید.
بهترین عملگر برای جداول استفاده از دستورالعمل ng-reeat می‌باشد.
نمایش داده‌ها در جدول
نمایش داده‌ها در جدول انگولار بسیار ساده است به مثال زیر دراین‌باره توجه فرمایید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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> |
به‌سادگی با دریافت داده‌ها توسط انگولار و قرار دادنان در دستورالعمل ng-repeat برای تکرار جدول شما تولید خواهد شد.
ظاهری متفاوت با 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> |
با اعمال کدهای فوق یک حاشیه برای شما ایجاد خواهد و خانه‌ها یکی در میان سفید و خاکستری میشوند. با اعمال استایل شما ظاهری متفاوت به‌کار خودخواهید داد و نمای بهتری برای کار خود در دست خواهید داشت.
نمایش به‌وسیله‌ی فیلتر orderBy
برای دسته‌بندی داده‌های جدول از فیلتر orderBy استفاده خواهیم کرد به قطعه کد زیر توجه کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names | orderBy : 'Country'"> <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> |
نمایش جدول به‌وسیله‌ی فیلتر uppercase
برای نمایش داده‌ها با حروف بزرگ از فیلتر uppercase استفاده می‌کنیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names"> <td>{{ x.Name }}</td> <td>{{ x.Country | uppercase }}</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> |
نمایش داده‌ها به‌صورت فهرست بندی
برای نمایش داده‌ها به‌صورت فهرست شماره‌دار از فیلتر $index در تگ کمک می‌گیریم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names"> <td>{{ $index + 1 }}</td> <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> |
نمایش داده‌های زوج و فرد
شما با اعمال فیلتر $odd می‌توانید داده‌هایی که در خانه‌های فرد هستند را مدیریت کنید و با فیلتر $even می‌توانید داده‌هایی که در خانه‌های زوج قرار دارند را مدیریت کنید، قطعاً استفاده از داده‌ها به این صورت برای شما مفید خواهد بود. برای درک بهتر این موضوع به قطعه کد زیر توجه کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div ng-app="myApp" ng-controller="customersCtrl"> <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> </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> |
امیدوارم این آموزش هم برای شما عزیزان مفید واقع‌شده باشد.
برای خواندن مقالات بیشتر دراین‌باره می‌توانید به سایت w3schools مراجعه فرمایید.
یاعلی
