AngularJS => एनजी-दोहराने

परिचय

एक संग्रह से आइटम के अनुसार ngRepeat निर्देश तत्काल एक बार टेम्पलेट करता है। संग्रह एक सरणी या ऑब्जेक्ट होना चाहिए। प्रत्येक टेम्पलेट उदाहरण का अपना दायरा होता है, जहां दिए गए लूप वेरिएबल को वर्तमान संग्रह आइटम पर सेट किया जाता है, और $index को आइटम इंडेक्स या कुंजी पर सेट किया जाता है।

वाक्य - विन्यास

<element ng-repeat="expression"></element>
<div ng-repeat="(key, value) in myObj">...</div>
<div ng-repeat="variable in expression">...</div>

पैरामीटर

परिवर्तनशील	विवरण
`$index`	दोहराया तत्व की संख्या पुनरावृत्ति ऑफसेट (0..length -1)
`$first`	बूलियन सच है अगर दोहराया तत्व पुनरावृत्ति में पहली बार है।
`$middle`	बूलियन सच है अगर दोहराया तत्व पुनरावृत्ति में पहले और आखिरी के बीच है।
`$last`	बूलियन सच है अगर दोहराया तत्व पुनरावृत्ति में अंतिम है।
`$even`	बूलियन सच है अगर पुनरावृत्ति स्थिति `$index` भी (अन्यथा गलत है)।
`$odd`	बूलियन सच है अगर इटेरेटर की स्थिति `$index` विषम है (अन्यथा गलत है)।

टिप्पणियों

AngularJS इन मापदंडों को विशेष चर के रूप में प्रदान करता है जो एनजी-रिपीट एक्सप्रेशन और एचटीएमएल टैग के अंदर कहीं भी उपलब्ध हैं, जिस पर एनजी-रिपीट रहता है।

ऑब्जेक्ट प्रॉपर्टीज पर इरेटिंग

<div ng-repeat="(key, value) in myObj"> ... </div>

उदाहरण के लिए

<div ng-repeat="n in [42, 42, 43, 43]">
  {{n}}
</div>

ट्रैकिंग और डुप्लिकेट

ngRepeat संग्रह में परिवर्तनों का पता लगाने के लिए $ ngRepeat का उपयोग करता है। जब कोई परिवर्तन होता है, तो ngRepeat तब DOM के अनुरूप परिवर्तन करता है:

जब कोई आइटम जोड़ा जाता है, तो DOM के लिए टेम्पलेट का एक नया उदाहरण जोड़ा जाता है।
जब कोई आइटम हटाया जाता है, तो उसका टेम्पलेट उदाहरण DOM से हटा दिया जाता है।
जब आइटम पुन: क्रमबद्ध होते हैं, तो उनके संबंधित टेम्पलेट DOM में पुन: व्यवस्थित होते हैं।

डुप्लिकेट

किसी भी सूची के लिए track by जिसमें डुप्लिकेट मान शामिल हो सकते हैं।
track by सूची परिवर्तनों में भी काफी तेजी आई है।
यदि आप इस मामले में track by उपयोग नहीं करते हैं, तो आपको त्रुटि मिलती है: [ngRepeat:dupes]

$scope.numbers = ['1','1','2','3','4'];

<ul>
  <li ng-repeat="n in numbers track by $index">
    {{n}}
  </li>
</ul>

ng-repeat-start-ng + एनजी-रिपीट-एंड

AngularJS 1.2 ng-repeat हैंडल कई तत्वों को ng-repeat-start और ng-repeat-end साथ संभालता है:

// table items
$scope.tableItems = [
    {
        row1: 'Item 1: Row 1',
        row2: 'Item 1: Row 2'
    },
    {
        row1: 'Item 2: Row 1',
        row2: 'Item 2: Row 2'
    }
];

// template
<table>
    <th>
        <td>Items</td>
    </th>
    <tr ng-repeat-start="item in tableItems">
        <td ng-bind="item.row1"></td>
    </tr>
    <tr ng-repeat-end>
        <td ng-bind="item.row2"></td>
    </tr>
</table>

आउटपुट:

आइटम
आइटम 1: पंक्ति 1
आइटम 1: पंक्ति 2
आइटम 2: पंक्ति 1
आइटम 2: पंक्ति 2

Modified text is an extract of the original Stack Overflow Documentation

के तहत लाइसेंस प्राप्त है CC BY-SA 3.0

से संबद्ध नहीं है Stack Overflow

AngularJS
एनजी-दोहराने

खोज…