उदाहरण के साथ AngularJS ng-repeat डायरेक्टिव
जेम्स हार्टमैन
AngularJS में एनजी-रिपीट निर्देश
RSI एनजी-दोहराने AngularJS में डायरेक्टिव का उपयोग नियंत्रक में परिभाषित दोहराए गए मानों को प्रदर्शित करने के लिए किया जाता है। कभी-कभी हमें दृश्य में आइटम की सूची प्रदर्शित करने की आवश्यकता होती है। ng-repeat डायरेक्टिव हमें नियंत्रक में परिभाषित आइटम की सूची को दृश्य पृष्ठ पर प्रदर्शित करने में मदद करता है।
AngularJS एनजी-रिपीट निर्देश उदाहरण
आइए AngularJS में ng-repeat निर्देश का एक उदाहरण देखें:
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body >
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<div ng-app="DemoApp" ng-controller="DemoController">
<h1>Topics</h1>
<ul><li ng-repeat="tpname in TopicNames">
{{tpname.name}}
</li></ul>
</div>
<script>
var app = angular.module('DemoApp',[]);
app.controller('DemoController', function($scope){
$scope.TopicNames =[
{name: "What controller do from Angular's perspective"},
{name: "Controller Methods"},
{name: "Building a basic controller"}];
});
</script>
</body>
</html>
कोड स्पष्टीकरण:
- कंट्रोलर में, हम सबसे पहले लिस्ट आइटम की अपनी सरणी को परिभाषित करते हैं जिसे हम व्यू में परिभाषित करना चाहते हैं। यहाँ हमने “TopicNames” नामक एक सरणी को परिभाषित किया है जिसमें तीन आइटम हैं। प्रत्येक आइटम में एक नाम-मूल्य जोड़ी होती है।
- फिर TopicsNames की सरणी को “topics” नामक सदस्य चर में जोड़ा जाता है और हमारे स्कोप ऑब्जेक्ट से जोड़ा जाता है।
- हम HTML टैग का उपयोग कर रहे हैं (अक्रमित सूची) और (सूची आइटम) हमारे सरणी में आइटम की सूची प्रदर्शित करने के लिए। फिर हम अपने सरणी में प्रत्येक आइटम को देखने के लिए ng-repeat निर्देश का उपयोग करते हैं। शब्द "tpname" एक चर है जिसका उपयोग सरणी topics.TopicNames में प्रत्येक आइटम को इंगित करने के लिए किया जाता है।
- इसमें हम प्रत्येक ऐरे आइटम का मान प्रदर्शित करेंगे।
यदि कोड सफलतापूर्वक निष्पादित होता है, तो जब आप ब्राउज़र में अपना कोड चलाएँगे तो निम्न आउटपुट दिखाया जाएगा। आपको सरणी के सभी आइटम (मूल रूप से विषयों में TopicNames) प्रदर्शित दिखाई देंगे।
आउटपुट:
AngularJS एकाधिक नियंत्रक
एक उन्नत नियंत्रक का उदाहरण एक कोणीय जेएस अनुप्रयोग में एकाधिक नियंत्रकों की अवधारणा होगी।
आप अलग-अलग व्यावसायिक तर्क कार्यों को अलग करने के लिए कई नियंत्रकों को परिभाषित करना चाह सकते हैं। पहले हमने एक नियंत्रक में अलग-अलग विधियों के बारे में उल्लेख किया था जिसमें एक विधि में संख्याओं के जोड़ और घटाव के लिए अलग-अलग कार्यक्षमता थी। खैर, तर्क के अधिक उन्नत पृथक्करण के लिए आपके पास कई नियंत्रक हो सकते हैं। उदाहरण के लिए, आपके पास एक नियंत्रक हो सकता है जो केवल संख्याओं पर संचालन करता है और दूसरा जो स्ट्रिंग्स पर संचालन करता है।
आइए एक उदाहरण देखें कि हम एक angular.JS अनुप्रयोग में एकाधिक नियंत्रकों को कैसे परिभाषित कर सकते हैं।
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body >
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<div ng-app="DemoApp">
<div ng-controller="firstcontroller">
<div ng-controller="secondcontroller">
{{lname}}
</div>
</div>
</div>
<script>
var app = angular.module('DemoApp',[]);
app.controller('firstcontroller', function($scope){
$scope.pname="firstcontroller";
});
app.controller('secondcontroller', function($scope){
$scope.lname="secondcontroller";
});
</script>
</body>
</html>
कोड स्पष्टीकरण:
- यहाँ हम “firstController” और “secondController” नामक 2 नियंत्रक परिभाषित कर रहे हैं। प्रत्येक नियंत्रक के लिए हम प्रोसेसिंग के लिए कुछ कोड भी जोड़ रहे हैं। हमारे firstController में, हम “pname” नामक एक वेरिएबल जोड़ते हैं जिसका मान “firstController” है, और secondController में हम “lname” नामक एक वेरिएबल जोड़ते हैं जिसका मान “secondController” है।
- दृश्य में, हम दोनों नियंत्रकों तक पहुंच रहे हैं और दूसरे नियंत्रक से सदस्य चर का उपयोग कर रहे हैं।
यदि कोड सफलतापूर्वक निष्पादित होता है, तो जब आप ब्राउज़र में अपना कोड चलाएँगे तो निम्न आउटपुट दिखाया जाएगा। आपको "secondController" का सारा टेक्स्ट उम्मीद के मुताबिक दिखाई देगा।
आउटपुट:
सारांश
- एनजी-रिपीट निर्देश AngularJS एकाधिक दोहराए जाने वाले आइटम प्रदर्शित करने के लिए उपयोग किया जाता है।
- हमने एक उन्नत नियंत्रक पर भी नजर डाली जो एक अनुप्रयोग में एकाधिक नियंत्रकों की परिभाषा पर विचार करता था।
