AngularJS টেবিল

টেবিল প্রদর্শন করার জন্য ng-repeat উপযুক্ত।

টেবিলের মধ্যে ডাটা প্রদর্শন করা

AngularJS এর মাধ্যমে টেবিল প্রদর্শন করা খুবই সহজঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<title>AngularJS উদাহরণ</title>
</head>
<body>
     <div ng-app="myApp" ng-controller="customersCtrl"> 
         <table>
            <tr ng-repeat="a in names">
              <td>{{ a.Name }}</td>
              <td>{{ a.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>

ফলাফল

সিএসএস স্টাইলের মাধ্যমে প্রদর্শন করা

টেবিলকে সুন্দর করার জন্য কিছু সিএসএস ব্যবহার করা হয়ঃ

সিএসএস স্টাইল

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

অর্ডার ফিল্টারের মাধ্যমে প্রদর্শন করা

টেবিলকে সর্ট(sort) কারা জন্য orderBy ফিল্টার(filter) ব্যবহার করা হয়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<title>AngularJS উদাহরণ</title>
<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="a in names | orderBy : 'Country'">
    <td>{{ a.Name }}</td>
    <td>{{ a.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 করার জন্য uppercase ফিল্টার(filter) ব্যবহার করা হয়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<title>AngularJS উদাহরণ</title>
<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="a in names">
    <td>{{ a.Name }}</td>
    <td>{{ a.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) মাধ্যম প্রদর্শন করা

টেবিলের ইনডেক্স ডিসপ্লে করানোর জন্য $index সম্বলিত <td> যোগ করুন।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<title>AngularJS উদাহরণ</title>
<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="a in names">
    <td>{{ $index + 1 }}</td>
    <td>{{ a.Name }}</td>
    <td>{{ a.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>

ফলাফল

$even এবং $odd ব্যবহার করে।

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
    </script>
    <title>AngularJS উদাহরণ</title> 
<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="a in names">
    <td ng-if="$odd" style="background-color:#f1f1f1">
    {{ a.Name }}</td>
    <td ng-if="$even">
    {{ a.Name }}</td>
    <td ng-if="$odd" style="background-color:#f1f1f1">
    {{ a.Country }}</td>
    <td ng-if="$even">
    {{ a.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>

ফলাফল

« পূর্ববর্তী

পরবর্তী »

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য

AngularJs টিউটোরিয়াল

AngularJS টেবিল

টেবিলের মধ্যে ডাটা প্রদর্শন করা

উদাহরণ

ফলাফল

সিএসএস স্টাইলের মাধ্যমে প্রদর্শন করা

সিএসএস স্টাইল

অর্ডার ফিল্টারের মাধ্যমে প্রদর্শন করা

উদাহরণ

ফলাফল

uppercase ফিল্টারের মাধ্যমে প্রদর্শন করা

উদাহরণ

ফলাফল

ইনডেক্সের ($index) মাধ্যম প্রদর্শন করা

উদাহরণ

ফলাফল

$even এবং $odd ব্যবহার করে।

উদাহরণ

ফলাফল

আমাদের টিউটোরিয়াল সমূহ

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য