Angular.js एनजी-रिपीट कई तत्वों में

इस प्रश्न को आंशिक रूप से यहां संबोधित किया गया है: Angular.js एनजी-रिपीट मल्टिपल ट्रे

हालाँकि, यह सिर्फ एक काम है-वास्तव में, यह वास्तव में मुख्य मुद्दे को संबोधित नहीं करता है, जो है: एक आवरण के बिना कई तत्वों में एनजी-रिपीट का उपयोग कैसे किया जा सकता है?

उदाहरण के लिए, jquery.accordion के लिए आपको h3 और div एलिमेंट को दोहराना पड़ता है, ऐसे में एनजी-रिपीट कैसे हो सकता है?

— geoidesic
स्रोत

जवाबों:

159

अब हमारे पास इसके लिए एक उचित समर्थन है, कृपया देखें:

AngularJs कॉमिट

इस परिवर्तन के साथ अब आप कर सकते हैं:

<table>
  <tr ng-repeat-start="item in list">
      <td>I get repeated</td>
  </tr>
  <tr ng-repeat-end>
      <td>I also get repeated</td>
  </tr>
</table>

— इगोर मिनार
स्रोत

मामले में यह किसी और की मदद करता है ... यह angularjs.org वेबसाइट पर AngularJs के स्थिर, और न ही अस्थिर निर्माण में उपलब्ध नहीं था। इस काम को करने के लिए मुझे Angular.js के ब्लीडिंग-एज को स्थापित करना पड़ा - यहाँ कैसे है: stackoverflow.com/questions/17501052/…

— geoidesic

जैसा कि @geoidesic बताता है, यह 1.1.5 के बाद उतरा, इसलिए इसे 1.1.6 में देखें (या बहुत संभावना 1.2.0)

— Anson

बस उस एनजी को दोहराना शुरू करना होगा जो वर्तमान में अस्थिर संस्करण से संबंधित है (अगस्त 13)

— bresleveloper

और क्या होगा अगर दूसरा <tr> खुद को "नेस्टेड" दोहराया जाए? उदाहरण के लिए: <tr ng-repeat-start = ".."> </ tr> <tr ng-repeat = "someelse" nt-repeat-stop> </ tr>

— Andre

@ और ऐसा मत करो। बल्कि अपने पहले एनजी-रिपीट के भीतर एक नया निर्देश बनाएं।

— जियोसाइडिक

एक तालिका में एनजी-दोहराने के 2 से अधिक स्तरों पर ऊपर आंद्रे के प्रश्न का उत्तर देने के लिए, आप इसे पूरा करने के लिए कई एनजी-रिपीट-स्टार्ट का उपयोग कर सकते हैं।

<tr ng-repeat-start="items in list">
   <td>{{items.title}}</td>
</tr>
<tr ng-repeat-start="item in items">
   <td>{{item.subtitle}}</td>
</tr>
<tr ng-repeat-end ng-repeat="value in item.values">
   <td>{{value.col1}}</td>
   <td>{{value.col2}}</td>
</tr>
<tr ng-repeat-end></tr>

यहाँ एक है plunker उदाहरण

— hackfan
स्रोत

इस काम को प्राप्त करने की कोशिश कर रहा हूं, लेकिन मैं केवल प्राप्त कर रहा हूं: अव्यक्त विशेषता, 'एनजी-रिपीट-स्टार्ट' पाया गया लेकिन कोई मिलान 'एनजी-रिपीट-एंड' नहीं मिला। क्या यह अब काम नहीं करता है? कोणीय 1.5 का उपयोग करना

— stibay

अद्यतन : यह उत्तर पुराना है। कृपया @IgorMinar उत्तर देखें और मानक ng-repeat-startऔर ng-repeat-endनिर्देशों का उपयोग करें ।

~~दो विकल्प हैं:~~

पहला विकल्प निर्देश बनाना है जो कई टैगों को प्रस्तुत करेगा और स्रोत टैग ( jsfiddle ) को प्रतिस्थापित करेगा

<div multi ></div>

angular.module('components').directive('multi', function ($compile) {
return {
    restrict: 'A',
    scope : {
       first : '=',
       last : '=',
    },        
    terminal:true,

    link: function (scope, element, attrs) {
       var tmpl = '', arr = [0,1,2,3]

       // this is instead of your repeater
       for (var i in arr) {
          tmpl +='<div>another div</div>'
       }

       var newElement = angular.element(tmpl);
       $compile(newElement)(scope);
       element.replaceWith(newElement); 
    }
})

दूसरा विकल्प कोणीय के अद्यतन स्रोत कोड का उपयोग करना है जो टिप्पणी शैली को पुन: सक्रिय करने में सक्षम बनाता है निर्देश ( plnkr )

<body ng-controller="MainCtrl">
 <div ng-init="arr=[0,1,2]" ></div>
   <!-- directive: ng-repeat i in arr -->
     <div>{{i}}</div>
     <div>{{ 'foo' }}</div>  
   <!-- /ng-repeat -->

   {{ arr }}

  <div ng-click="arr.push(arr.length)">add</div>
</body>

— Vittore
स्रोत

बहुत अच्छा लगता है। मैं इसे किसी भी हालांकि समझ में नहीं आता! आपके पहले उदाहरण में मैं एनजी-रिपीट नहीं देख रहा हूं, इसलिए मुझे यकीन नहीं है कि यह कैसे प्रासंगिक है (मैंने फ़िडल को देखा लेकिन यह इतना जटिल है कि मैं न तो सिर बना सकता हूं और न ही इसकी पूंछ बना सकता हूं)। आपका दूसरा उदाहरण सिर्फ मेरे लिए gobbledigook है।

— जियोएडेसिक

पहला उदाहरण समस्या को संबोधित नहीं करता है क्योंकि आप अभी भी दो तत्वों के चारों ओर एक दोहराए जाने वाले आवरण के साथ समाप्त होते हैं ... अर्थात एनजी-दोहराने निर्देश वाले तत्व को भी दोहराया जाता है - मैं चाहता हूं कि आंतरिक तत्वों को दोहराया जाए।

— जियोसाइडिक

@ user2448430 नहीं, आप नहीं। element.replaceWith(newElement);रैपर टैग को आपकी ज़रूरत के साथ बदल देगा। भी आप अपने निर्देश में लूप कर सकते हैं और tmpl में जितने आवश्यक हो उतने टैग जोड़ सकते हैं।

— विट्टोर

मैं असहमत हूं। कोशिश की और यह एनजी-रिपीट डायरेक्टिव वाले तत्व को दोहराता है। इसके अलावा दूसरा उदाहरण वास्तव में काम नहीं कर रहा है। Div दोहराता नहीं है, यह सिर्फ वह सरणी है जो आपके plnkr उदाहरण में आउटपुट हो रही है।

— भू

@JoshGough यह करता है, इसलिए मैं उन स्पैनों को छिपाने के लिए अपने सीएसएस में नियम जोड़ना समाप्त करता हूं।

— विट्टोर