AngularJS

AngularJS — جداول (Tables)

آخرین بروزرسانی: 1404/08/23
قبلی: HTTP (Http) بعدی: Select (Select)

جداول (Tables)

توی این درس «جداول در AngularJS» را می سازیم. «جدول (Table)» یعنی داده سطری ستونی. «دایرکتیو (Directive)» یعنی دستور مخصوص HTML. حالا با ng-repeat ردیف ها را می چینیم و با فیلترها خوشگل تر می کنیم.

نمایش جدول با ng-repeat

دایرکتیو ng-repeat روی آرایه می چرخد. سپس هر شیء را یک ردیف می کند.

<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

با کمی استایل، جدول خواناتر می شود. راه راه کردن ردیف ها کمک می کند.

<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 آرایه را بر اساس کلید دلخواه مرتب می کند.

<table>
  <tr ng-repeat="x in names | orderBy : 'Country'">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>

مشاهده در ادیتور

نمایش حروف بزرگ با uppercase

فیلتر uppercase متن را بزرگ می کند. برای ستون ها هم می شود.

<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country | uppercase }}</td>
  </tr>
</table>

مشاهده در ادیتور

نمایش شماره ردیف با $index

متغیر $index از صفر می شمارد. برای شماره گذاری عالی است.

<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 زوج و فرد بودن ردیف را می گویند. سپس استایل بده.

<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>

مشاهده در ادیتور

گام های عملی

  1. داده را با HTTP در AngularJS بگیر.
  2. لیست را با ng-repeat ردیف کن.
  3. با orderBy مرتب کن.
  4. نمایش را با CSS خوانا کن.

نکته: برای مرور سریع، لینک جداول در AngularJS را نشانه گذاری کن. همچنین بخش فیلترها برای مرتب سازی مفید است.

جمع بندی سریع

  • ng-repeat بهترین انتخاب برای جدول است.
  • orderBy جدول را مرتب می کند.
  • uppercase متن را بزرگ می کند.
  • $index شماره ردیف را می دهد.
  • $even/$odd برای استایل زوج/فرد عالی اند.
قبلی: HTTP (Http) بعدی: Select (Select)