Course Progress 35%

AngularJS Tables

← AngularJS AJAX – $http AngularJS Select Boxes →

AngularJS Tables का उपयोग data को structured और readable format में display करने के लिए किया जाता है। AngularJS में tables बनाना बहुत आसान होता है क्योंकि ng-repeat, filters और data binding की मदद से dynamic tables create किए जा सकते हैं, जो real-time data के साथ automatically update होते रहते हैं।

AngularJS tables का सबसे common use list, records, users, products और reports दिखाने में होता है।

Simple AngularJS Table

सबसे पहले एक basic table देखते हैं जिसमें static data AngularJS scope से आ रहा है।

<div ng-app="myApp" ng-controller="tableCtrl">
  <table border="1">
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
    <tr ng-repeat="user in users">
      <td>{{user.name}}</td>
      <td>{{user.age}}</td>
    </tr>
  </table>
</div>

<script>
  var app = angular.module("myApp", []);
  app.controller("tableCtrl", function($scope) {
    $scope.users = [
      { name: "Rahul", age: 25 },
      { name: "Neha", age: 22 },
      { name: "Amit", age: 30 }
    ];
  });
</script>

Code Explanation

  • $scope.users में array of objects define किया गया है
  • ng-repeat="user in users" table rows को loop करता है
  • हर object की name और age value table cells में show होती है
  • Data change होने पर table automatically update हो जाएगा

Table में Index दिखाना

AngularJS ng-repeat के साथ $index provide करता है।

<tr ng-repeat="user in users">
  <td>{{$index + 1}}</td>
  <td>{{user.name}}</td>
  <td>{{user.age}}</td>
</tr>

Code Explanation

  • $index current row का index देता है
  • +1 इसलिए किया गया ताकि numbering 1 से start हो
  • यह serial number या row number दिखाने में useful है

Table में Search (Filter) जोड़ना

AngularJS filter का उपयोग करके table में search functionality add की जा सकती है।

<input type="text" ng-model="searchText" placeholder="Search">

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr ng-repeat="user in users | filter:searchText">
    <td>{{user.name}}</td>
    <td>{{user.age}}</td>
  </tr>
</table>

Code Explanation

  • ng-model="searchText" user input store करता है
  • filter:searchText matching rows ही show करता है
  • Typing करते ही table real-time filter हो जाती है

Table Sorting (orderBy)

Table data को sort करने के लिए orderBy filter use किया जाता है।

<table border="1">
  <tr>
    <th ng-click="sortBy='name'">Name</th>
    <th ng-click="sortBy='age'">Age</th>
  </tr>
  <tr ng-repeat="user in users | orderBy:sortBy">
    <td>{{user.name}}</td>
    <td>{{user.age}}</td>
  </tr>
</table>

Code Explanation

  • sortBy scope variable sorting key store करता है
  • orderBy:sortBy उसी key के आधार पर data sort करता है
  • Column header पर click करने से sorting change होती है

Ascending और Descending Sort

<th ng-click="reverse = !reverse; sortBy='age'">Age</th>

<tr ng-repeat="user in users | orderBy:sortBy:reverse">

Code Explanation

  • reverse boolean value sort direction control करती है
  • true होने पर descending order
  • false होने पर ascending order

Table में limitTo का उपयोग

Large data में limited rows show करने के लिए limitTo filter use होता है।

<tr ng-repeat="user in users | limitTo:2">

Code Explanation

  • limitTo:2 सिर्फ पहले 2 records display करता है
  • Pagination या preview tables में useful है

Table with Dynamic Data ($http)

AngularJS tables अक्सर server से आने वाले data के साथ use होती हैं।

app.controller("apiCtrl", function($scope, $http) {
  $http.get("users.json").then(function(response) {
    $scope.users = response.data;
  });
});

<table border="1">
  <tr>
    <th>Name</th>
    <th>Email</th>
  </tr>
  <tr ng-repeat="user in users">
    <td>{{user.name}}</td>
    <td>{{user.email}}</td>
  </tr>
</table>

Code Explanation

  • $http.get() server से data fetch करता है
  • Response data $scope.users में store होता है
  • Table automatically populate हो जाती है

Conditional Styling in Tables

AngularJS expressions का उपयोग करके conditional styling की जा सकती है।

<tr ng-repeat="user in users" ng-class="{'highlight': user.age > 25}">

Code Explanation

  • ng-class condition के आधार पर CSS class apply करता है
  • Age 25 से ज्यादा होने पर row highlight होती है

Empty Table Message

<tr ng-if="users.length == 0">
  <td colspan="2">No data available</td>
</tr>

Code Explanation

  • ng-if condition check करता है
  • Data न होने पर message show होता है

Table Best Practices

  • Large data के लिए filters limited रखें
  • Sorting और searching को simple रखें
  • Heavy logic controller या service में रखें
  • Table HTML clean और readable रखें

Common Table Mistakes

  • ng-repeat को <table> tag पर लगाना
  • Large datasets पर multiple filters apply करना
  • Sorting logic HTML में hardcode करना
  • Data undefined होने पर error handle न करना

Summary

इस chapter में आपने सीखा:

  • AngularJS tables कैसे बनाते हैं
  • ng-repeat से dynamic rows generate करना
  • Search और sorting functionality
  • limitTo और orderBy filters
  • $http data के साथ tables
  • Conditional styling और empty state handling
← AngularJS AJAX – $http AngularJS Select Boxes →
  • Home