AngularJS Table ،جدول ها در آنگولار جی اس

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

مقالات

نمایش جداول با angular بسیار ساده است.

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

<table>

<td>{{ x.Country }}</td>

</tr>

</table>

</div>

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>

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

<table>

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

<table>

<td>{{ x.Country | uppercase }}</td>

</tr>

</table>

نمایش جدول index ،($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>

<table>

<td>{{ $index + 1 }}</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>

<table>

<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Country }}</td>

<td ng-if="$even">{{ x.Country }}</td>

</tr>

</table>

5/5 - (1 امتیاز)

1 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

AngularJS Table ،جدول ها در آنگولار جی اس

نمایش جداول با angular بسیار ساده است.

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

نمایش جداول با استفاده از فیلتر orderBy

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

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

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

مطالب زیر را حتما مطالعه کنید

1 دیدگاه

دیدگاهتان را بنویسید لغو پاسخ

نمایش جداول با angular بسیار ساده است.

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

نمایش جداول با استفاده از فیلتر orderBy

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

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

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

مطالب زیر را حتما مطالعه کنید

مسیریابی انگولار AngularJS Routing

ساخت انیمیشن با انگولار – angularjs animation

AngularJS Includes

api آنگولار جی اس – Angularjs API

اعتبارسنجی فرم ها با آنگولار – AngularJS Form Validation

ساخت form با آنگولار جی اس – angular forms

1 دیدگاه

دیدگاهتان را بنویسید لغو پاسخ