Angularjs - Table in Hindi




AngularJS में tables को attract करने के लिए ng-repeat के directive का उपयोग किया जाता है AngularJS ng-repeat directive हमें angularJS में tables को बनाने की अनुमति देता है ng-repeat instructions HTML तत्व को दोहराता है जिसमें इसे जोड़ जाता है जब तक कि सरणी में सभी objects को पार नहीं किया जाता है

AngularJS ng-repeat के directive का उपयोग JSON डेटा से बाइंड HTML तालिका में किया जाएगा सबसे पहले JSON डेटा उत्पन्न होता है और फिर इसमें AngularJS ng-repeat के directive का उपयोग करके बाइंड HTML तालिका का उपयोग किया जाता है

Angularjs के अनुप्रयोगों में एनजी-टेबल module का उपयोग करके हम कार्य systems को प्राप्त कर सकते हैं जैसे टेबल प्रारूप, सॉर्टिंग, filtering और पेजिंग में डेटा को बहुत कोड लिखे बिना भी दिखा सकते है

AngularJS टेबल्स में हम दोहराने योग्य डेटा को दिखा सकते हैं ng-repeat के directive का उपयोग करके हम table को आसानी से attract कर सकते हैं तालिका में ng-repeat के लिए नीचे दिए गए उदाहरण को देखें।

Example Code

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>

     <div ng-app = "TableApp" ng-controller = "TableController" ng-init="">
         
        <table>
          <tr>
            <th>Name</th>
            <th>Age</th>
          </tr>
          <tr ng-repeat="student in Students | orderBy: 'name'">
            <td>{{ student.name }}</td>
            <td>{{ student.age }}</td>
          </tr>
        </table>
        
      </div>
      
      <script>
         var mainApp = angular.module("TableApp", []);
         
         mainApp.controller('TableController', function($scope) {
            $scope.Students = [
                              {name:'Rahul',age:30},
                              {name:'Ali',age:25},
                              {name:'Raz',age:35},
                              {name:'Sharma',age:49},
                              {name:'Neeraj',age:52}
                             ]
             
         });
      </script>  

</body>
</html>

Example Result

Name Age
{{ student.name }} {{ student.age }}