|||

ورود به حساب کاربری

شماره همراه خود را وارد کنید

ورود با کلمه عبور ارسال کد تایید

فراموشی کلمه عبور

در صورت فراموشی کلمه عبور شماره موبایل خود را وارد کنید.

ورود با کلمه عبور تنظیم مجدد

ورود به حساب کاربری

در صورتی که کلمه عبور خود را بروزرسانی کرده اید با کلمه عبور وارد حساب کاربری خود شوید.

شماره همراه خود را وارد کنید

ورود و ادامه

جدول ها در AngularJS

با استفاده از دستور ng-repeat براحتی می توانید جدول تولید کنید و این دستور کاملا می تواند از جدول ها پیتیبانی کند.

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

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

مثال جدول ها در AngularJS
<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 اضافه کنیم :

مثال جدول ها در AngularJS
<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 استفاده می کنیم :

مثال جدول ها در AngularJS
<table>
  <tr ng-repeat="x in names | orderBy : 'Country'">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table> 
مشاهده مثال

مشاهده با فیلتر حروف بزرگ

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

مثال جدول ها در AngularJS
<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country | uppercase }}</td>
  </tr>
</table> 
مشاهده مثال

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

مثال جدول ها در AngularJS
<table>
  <tr ng-repeat="x in names">
    <td>{{ $index + 1 }}</td>
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table> 
مشاهده مثال

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

مثال جدول ها در AngularJS
<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> 
مشاهده مثال

نظر شما

مقالات و دروس

برای پروژه‌ی خود مشاوره رایگان بگیرید

طراحی سایت، توسعه نرم‌افزار، اتوماسیون و شبکه؛ با کارشناسان شرکت نرم‌افزاری وب مهراز در ارتباط باشید.

درخواست مشاوره

مقالات مرتبط

|||

ورود به حساب کاربری

شماره همراه خود را وارد کنید

ورود با کلمه عبور ارسال کد تایید

فراموشی کلمه عبور

در صورت فراموشی کلمه عبور شماره موبایل خود را وارد کنید.

ورود با کلمه عبور تنظیم مجدد