AngularJS टेबल: सॉर्टिंग, ऑर्डरबाय और अपरकेस फ़िल्टर [उदाहरण]

द्वारा: जेम्स हार्टमैन जेम्स हार्टमैन
Hours Updated

वेब पेजों के साथ काम करते समय HTML में टेबल्स एक सामान्य तत्व है जिसका प्रयोग किया जाता है।

HTML में तालिकाएँ HTML टैग का उपयोग करके डिज़ाइन की जाती हैं

  1. टैग - यह तालिका प्रदर्शित करने के लिए उपयोग किया जाने वाला मुख्य टैग है।
  2. - इस टैग का उपयोग तालिका के भीतर पंक्तियों को अलग करने के लिए किया जाता है।
  3. - इस टैग का उपयोग वास्तविक तालिका डेटा प्रदर्शित करने के लिए किया जाता है।
  4. - इसका उपयोग तालिका शीर्ष डेटा के लिए किया जाता है।

उपरोक्त उपलब्ध HTML टैग का उपयोग करें AngularJS, हम टेबल डेटा को पॉप्युलेट करना आसान बना सकते हैं। संक्षेप में, ng-repeat निर्देश का उपयोग टेबल डेटा को भरने के लिए किया जाता है।

हम इस अध्याय के दौरान यह देखेंगे कि इसे कैसे प्राप्त किया जाए। हम यह भी देखेंगे कि हम Angular टेबल इंडेक्स प्रदर्शित करने के लिए $index विशेषता का उपयोग करने के साथ-साथ ऑर्डरबाय और अपरकेस फ़िल्टर का उपयोग कैसे कर सकते हैं।

तालिका में डेटा भरें और प्रदर्शित करें

जैसा कि हमने इस अध्याय के परिचय में चर्चा की है, HTML पृष्ठ में तालिका संरचना बनाने का आधार वही रहता है।

तालिका की संरचना अभी भी सामान्य HTML टैग का उपयोग करके बनाई गई है , , और हालाँकि, डेटा को AngularJS में ng-repeat निर्देश का उपयोग करके पॉप्युलेट किया जाता है।
आइए एक सरल उदाहरण देखें कि हम एंगुलर टेबल को कैसे कार्यान्वित कर सकते हैं।
इस उदाहरण में,

हम एक एंगुलर तालिका बनाने जा रहे हैं जिसमें पाठ्यक्रम के विषयों के साथ-साथ उनका विवरण भी होगा।

चरण 1) हम सबसे पहले अपने HTML पेज में एक “स्टाइल” टैग जोड़ेंगे ताकि तालिका को एक उचित तालिका के रूप में प्रदर्शित किया जा सके।

तालिका में डेटा भरें और प्रदर्शित करें

  1. स्टाइल टैग को HTML पेज में जोड़ा जाता है। यह HTML तत्वों के लिए आवश्यक किसी भी फ़ॉर्मेटिंग विशेषता को जोड़ने का मानक तरीका है।
  2. हम अपनी तालिका में दो शैली मान जोड़ रहे हैं।
  • एक यह है कि हमारी Angular तालिका के लिए एक ठोस सीमा होनी चाहिए और
  • दूसरा यह है कि हमारे एंगुलर टेबल डेटा के लिए पैडिंग रखी जानी चाहिए।

चरण 2) अगला चरण तालिका और उसका डेटा उत्पन्न करने के लिए कोड लिखना है।

तालिका में डेटा भरें और प्रदर्शित करें

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">

</head>
<body>
<title>Event Registration</title>
<style>
    table,th,td{
        border: 1px solid grey;
        padding:5px;
    }
</style>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <table>
        <tr ng-repeat="ptutor in tutorial">
            <td>{{ptutor.Name}}</td>
            <td>{{ptutor.Description}}</td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope) {

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]});
</script>
</body>
</html>

कोड स्पष्टीकरण

  1. हम सबसे पहले "ट्यूटोरियल" नामक एक वैरिएबल बना रहे हैं और एक चरण में इसे कुछ कुंजी-मूल्य जोड़े असाइन कर रहे हैं। प्रत्येक कुंजी-मूल्य जोड़ी का उपयोग तालिका प्रदर्शित करते समय डेटा के रूप में किया जाएगा। फिर ट्यूटोरियल वैरिएबल को स्कोप ऑब्जेक्ट को असाइन किया जाता है ताकि इसे हमारे दृश्य से एक्सेस किया जा सके।
  2. यह तालिका बनाने का पहला चरण है, और हम इसका उपयोग करते हैं टैग।
  3. डेटा की प्रत्येक पंक्ति के लिए, हम "ng-repeat निर्देश" का उपयोग कर रहे हैं। यह निर्देश ptutor चर का उपयोग करके ट्यूटोरियल स्कोप ऑब्जेक्ट में प्रत्येक कुंजी-मूल्य जोड़ी से गुजरता है।
  4. अंत में, हम उपयोग कर रहे हैं कुंजी-मान युग्मों के साथ टैग (ptutor.Name और ptutor.Description) का उपयोग करके Angular तालिका डेटा प्रदर्शित करें।

यदि कोड सफलतापूर्वक निष्पादित हो जाता है, तो जब आप अपना कोड ब्राउज़र में चलाएंगे तो निम्नलिखित आउटपुट दिखाया जाएगा।

उत्पादन

तालिका में डेटा भरें और प्रदर्शित करें

उपरोक्त आउटपुट से,

  • हम देख सकते हैं कि नियंत्रक में परिभाषित कुंजी-मूल्य युग्मों की सरणी से डेटा के साथ तालिका ठीक से प्रदर्शित होती है।
  • तालिका डेटा को "एनजी-रिपीट निर्देश" का उपयोग करके प्रत्येक कुंजी-मूल्य जोड़े के माध्यम से उत्पन्न किया गया था।

संबंधित आलेख

AngularJS में निर्मित फ़िल्टर

तालिकाओं में डेटा प्रदर्शित करने के तरीके को बदलने के लिए AngularJS के भीतर इनबिल्ट फ़िल्टर का उपयोग करना बहुत आम है। हमने पहले ही पिछले अध्याय में फ़िल्टर को क्रियान्वित होते देखा है। आगे बढ़ने से पहले आइए फ़िल्टर का संक्षिप्त विवरण देखें।

Angular.JS में फ़िल्टर का उपयोग अभिव्यक्ति के मान को उपयोगकर्ता को प्रदर्शित करने से पहले उसे फ़ॉर्मेट करने के लिए किया जाता है। फ़िल्टर का एक उदाहरण 'अपरकेस' फ़िल्टर है जो स्ट्रिंग आउटपुट लेता है और स्ट्रिंग को फ़ॉर्मेट करता है और स्ट्रिंग में सभी वर्णों को अपरकेस के रूप में प्रदर्शित करता है।

अतः नीचे दिए गए उदाहरण में, यदि चर 'TutorialName' का मान 'AngularJS' है, तो नीचे दिए गए अभिव्यक्ति का आउटपुट 'ANGULARJS' होगा।

{{ TurotialName | uppercase }}

इस अनुभाग में, हम अधिक विस्तार से देखेंगे कि तालिकाओं में orderBy और अपरकेस फिल्टर का उपयोग कैसे किया जा सकता है।

OrderBy फ़िल्टर के साथ तालिका को सॉर्ट करें

इस फ़िल्टर का उपयोग टेबल के किसी एक कॉलम के आधार पर टेबल को सॉर्ट करने के लिए किया जाता है। पिछले उदाहरण में, हमारे Angular टेबल डेटा का आउटपुट नीचे दिखाए अनुसार दिखाई दिया।

नियंत्रक नियंत्रकों की कार्यशैली
मॉडल मॉडल और बाइंडिंग डेटा
निर्देशों निर्देशों का लचीलापन

आइए एक उदाहरण देखें कि कैसे हम “orderBy” फ़िल्टर का उपयोग कर सकते हैं और तालिका में पहले कॉलम का उपयोग करके Angular तालिका डेटा को सॉर्ट कर सकते हैं।

OrderBy फ़िल्टर के साथ तालिका को सॉर्ट करें

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">

</head>
<body>
<title>Event Registration</title>
<style>
    table,th,td{
        border: 1px solid grey;
        padding:5px;
    }
</style>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <table>
        <tr ng-repeat="ptutor in tutorial | orderBy : 'Name'">
            <td>{{ptutor.Name}}</td>
            <td>{{ptutor.Description}}</td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope) {

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]});
</script>
</body>
</html>

कोड स्पष्टीकरण

  1. हम उसी कोड का उपयोग कर रहे हैं जो हमने अपनी तालिका बनाने के लिए किया था, इस बार केवल अंतर यह है कि हम ng-repeat निर्देश के साथ “orderBy” फ़िल्टर का उपयोग कर रहे हैं। इस मामले में, हम कह रहे हैं कि हम कुंजी “नाम” द्वारा तालिका को क्रमबद्ध करना चाहते हैं।

यदि कोड सफलतापूर्वक निष्पादित हो जाता है, तो जब आप अपना कोड ब्राउज़र में चलाएंगे तो निम्नलिखित आउटपुट दिखाया जाएगा।

उत्पादन

OrderBy फ़िल्टर के साथ तालिका को सॉर्ट करें

आउटपुट से,

  • हम देख सकते हैं कि Angular टेबल में डेटा को पहले कॉलम के डेटा के अनुसार सॉर्ट किया गया है। हमारे डेटासेट में, “निर्देश” डेटा “मॉडल” डेटा से आता है, लेकिन क्योंकि हमने orderBy फ़िल्टर लागू किया है, इसलिए टेबल उसी के अनुसार सॉर्ट हो जाती हैं।

अपरकेस फ़िल्टर के साथ तालिका प्रदर्शित करें

हम एंगुलर तालिका में डेटा को अपरकेस में बदलने के लिए अपरकेस फ़िल्टर का भी उपयोग कर सकते हैं।

आइये एक उदाहरण देखें कि हम इसे कैसे प्राप्त कर सकते हैं।

अपरकेस फ़िल्टर के साथ तालिका प्रदर्शित करें

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">

</head>
<body>
<title>Event Registration</title>
<style>
    table,th,td{
        border: 1px solid grey;
        padding:5px;
    }
</style>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <table>
        <tr ng-repeat="ptutor in tutorial">
            <td>{{ptutor.Name | uppercase}}</td>
            <td>{{ptutor.Description}}</td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope) {

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]});
</script>
</body>
</html>

कोड स्पष्टीकरण

  1. हम उसी कोड का उपयोग कर रहे हैं जो हमने अपनी तालिका बनाने के लिए किया था, इस बार केवल अंतर यह है कि हम अपरकेस फ़िल्टर का उपयोग कर रहे हैं। हम इस फ़िल्टर का उपयोग “ptutor.Name” के साथ संयोजन में कर रहे हैं ताकि पहले कॉलम में सभी टेक्स्ट अपरकेस में प्रदर्शित हों।

यदि कोड सफलतापूर्वक निष्पादित हो जाता है, तो जब आप अपना कोड ब्राउज़र में चलाएंगे तो निम्नलिखित आउटपुट दिखाया जाएगा।

उत्पादन

अपरकेस फ़िल्टर के साथ तालिका प्रदर्शित करें

आउटपुट से,

  • हम देख सकते हैं कि “अपरकेस” फ़िल्टर का उपयोग करके, पहले कॉलम का सारा डेटा बड़े अक्षरों में प्रदर्शित होता है।

तालिका सूचकांक प्रदर्शित करें ($index)

तालिका अनुक्रमणिका प्रदर्शित करने के लिए, जोड़ें $ इंडेक्स के साथ.

आइये एक उदाहरण देखें कि हम इसे कैसे प्राप्त कर सकते हैं।

तालिका अनुक्रमणिका प्रदर्शित करें

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">

</head>
<body>
<title>Event Registration</title>
<style>
    table,th,td{
        border: 1px solid grey;
        padding:5px;
    }
</style>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <table>
        <tr ng-repeat="ptutor in tutorial">
            <td>{{$index + 1}}</td>
            <td>{{ptutor.Name}}</td>
            <td>{{ptutor.Description}}</td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope) {

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]});
</script>
</body>
</html>

कोड स्पष्टीकरण

  1. हम उसी कोड का उपयोग कर रहे हैं जो हमने अपनी तालिका बनाने के लिए किया था, इस बार एकमात्र अंतर यह है कि हम इंडेक्स कॉलम प्रदर्शित करने के लिए अपनी तालिका में एक अतिरिक्त पंक्ति जोड़ रहे हैं। इस अतिरिक्त कॉलम में, हम AngularJS द्वारा प्रदान की गई "$index" संपत्ति का उपयोग कर रहे हैं और फिर प्रत्येक पंक्ति के लिए इंडेक्स बढ़ाने के लिए +1 ऑपरेटर का उपयोग कर रहे हैं।

यदि कोड सफलतापूर्वक निष्पादित हो जाता है, तो जब आप अपना कोड ब्राउज़र में चलाएंगे तो निम्नलिखित आउटपुट दिखाया जाएगा।

उत्पादन

तालिका अनुक्रमणिका प्रदर्शित करें

आउटपुट से,

  • आप देख सकते हैं कि एक अतिरिक्त कॉलम बनाया गया है। इस कॉलम में, हम प्रत्येक पंक्ति के लिए बनाए जा रहे इंडेक्स देख सकते हैं।

सारांश

  • तालिका संरचनाएँ उपलब्ध मानक टैग का उपयोग करके बनाई जाती हैं एचटीएमएलतालिका में डेटा “ng-repeat” निर्देश का उपयोग करके पॉप्युलेट किया जाता है।
  • orderBy फ़िल्टर का उपयोग तालिका के भीतर किसी भी कॉलम के आधार पर तालिका को सॉर्ट करने के लिए किया जा सकता है।
  • अपरकेस फिल्टर का उपयोग किसी भी टेक्स्ट-आधारित कॉलम में डेटा को अपरकेस में प्रदर्शित करने के लिए किया जा सकता है।
  • “$index” प्रॉपर्टी का उपयोग तालिका के लिए इंडेक्स बनाने के लिए किया जा सकता है।
  • AngularJS.JS टेबल के विकास के दौरान सामने आने वाली एक आम समस्या बड़े डेटासेट का कार्यान्वयन है जिसमें डेटा की 1000+ पंक्तियाँ होती हैं। एनजी-दोहराने निर्देश गैर-प्रतिक्रियाशील हो सकता है, और इसलिए कई बार पूरा पेज अनुत्तरदायी हो जाता है। ऐसे मामले में, हमेशा ऐसा पेजिनेशन रखना बेहतर होता है जिसमें डेटा की पंक्तियाँ कई पेजों में फैली हों।

इस पोस्ट को संक्षेप में इस प्रकार लिखें: