جداول در AngularJS

جداول در AngularJS

دستور ng-repeat بهترین گزینه برای نمایش دادن جدول ها می باشد.

نمایش دادن داده ها در جدول

نمایش دادن جدول ها توسط AngularJS امر بسیار ساده ای می باشد:

<!DOCTYPE html> <html> <head> <title></title> <script src="Angular.js"></script> </head> <body> <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.html") .then(function (response) { $scope.names = response.data.records; }); }); </script> </body> </html>/

نمایش دادن اطلاعات به وسیله ی استایل css

به منظور بهتر کردن ظاهر آن می توان مقداری css به صفحه اضافه کرد:

<!DOCTYPE html> <html> <head> <title></title> <script src="Angular.js"></script> <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> </head> <body> <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.html") .then(function (response) { $scope.names = response.data.records; }); }); </script> </body> </html>

به منظور مرتب سازی جدول مورد نظر، لازم است یک فیلتر orderBy اضافه کنید:

<!DOCTYPE html> <html> <head> <title></title> <script src="Angular.js"></script> <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> </head> <body> <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.html") .then(function (response) { $scope.names = response.data.records; }); }); </script> </body> </html>

نمایش دادن به وسیله ی فیلتر uppercase

جهت نمایش دادن با حروف بزرگ، کافی است فیلتر uppercase را اضافه کنید:

<!DOCTYPE html> <html> <head> <title></title> <script src="Angular.js"></script> <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> </head> <body> <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.html") .then(function (response) { $scope.names = response.data.records; }); }); </script> </body> </html>

نشان دادن اندیس جدول (index$)

به منظور نمایش دادن اندیس جدول، لازم است یک تگ td همراه با index$ اضافه نمایید:

<!DOCTYPE html> <html> <head> <title></title> <script src="Angular.js"></script> <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> </head> <body> <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("http://www.w3schools.com/angular/customers.php") .then(function (response) { $scope.names = response.data.records; }); }); </script> </body> </html>

استفاده از even$ و odd$

<!DOCTYPE html> <html> <head> <title></title> <script src="Angular.js"></script> <style> table, td { border: 1px solid grey; border-collapse: collapse; padding: 5px; } </style> </head> <body> <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.html") .then(function (response) { $scope.names = response.data.records; }); }); </script> </body> </html>



نظرات کاربران



عبارت امنیتی : حاصل 7 × 4 می شود :
متن پیام :