AngularJS एनजी HTML तत्व के साथ एनजी-रिपीट

Question

मैं वर्तमान में एक सूची प्रदान करने के लिए कोड के इस टुकड़े का उपयोग कर रहा हूं:

<ul ng-cloak>
    <div ng-repeat="n in list">
        <li><a href="{{ n[1] }}">{{ n[0] }}</a></li>
        <li class="divider"></i>
    </div>
    <li>Additional item</li> 
</ul>

हालांकि, <div>तत्व कुछ ब्राउज़रों पर कुछ बहुत ही मामूली प्रतिपादन दोष पैदा कर रहा है। मैं जानना चाहूंगा कि डिव कंटेनर के बिना एनजी-रिपीट करने का एक तरीका है, या उसी प्रभाव को प्राप्त करने के लिए कोई वैकल्पिक तरीका है।

Comments

आप किन मुद्दों पर बात कर रहे हैं?

— Ja͢ck

अंतिम ली डिवाइडर अपने ढेर (क्रोम win7) की तरह थोड़ा मोटा लगता है। यह एक सीएसएस मुद्दा हो सकता है, हालांकि, मैं यह जानना चाहूंगा कि क्या यह कोणीय में तय किया जा सकता है। तुलना के लिए, knockoutJS <! -> का उपयोग करके कंटेनर रहित बाइंडिंग की अनुमति देता है।

— नेहज

मैं देखता हूं, मैं सर्वर साइड पर phptal का उपयोग करता हूं और उनके पास एक ताल है: विशेष रूप से इस उद्देश्य के लिए ब्लॉक टैग :) अनुमान है कि DOM हमेशा एक नए प्रकार के टैग को स्वीकार नहीं करता है जो कोणीय के साथ कठिन है

— Ja Octck

क्या आप यह दर्शाने के लिए HTML का भी अद्यतन कर सकते हैं कि आप htmlAppendनिर्देश का उपयोग कैसे कर रहे हैं ?

— निक

हो गया ... कुछ समय पहले ऐसा किया था, लेकिन मुझे याद है कि यह काम कर रहा है

— nehz

Answer 1

जैसा कि एंडी जोसलिन ने कहा कि वे एनजी-रिपीट पर आधारित टिप्पणी पर काम कर रहे थे, लेकिन जाहिर तौर पर बहुत सारे ब्राउज़र मुद्दे थे । सौभाग्य से AngularJS 1.2 नए तत्वों के साथ बाल तत्वों को जोड़ने के बिना दोहराने के लिए अंतर्निहित समर्थन जोड़ता है ng-repeat-startऔर ng-repeat-end।

यहाँ बूटस्ट्रैप पेजिनेशन जोड़ने के लिए एक छोटा सा उदाहरण दिया गया है :

<ul class="pagination">
  <li>
    <a href="#">&laquo;</a>
  </li>
  <li ng-repeat-start="page in [1,2,3,4,5,6]"><a href="#">{{page}}</a></li>
  <li ng-repeat-end class="divider"></li>
  <li>
    <a href="#">&raquo;</a>
  </li>
</ul>

काम करने का एक पूरा उदाहरण यहाँ पाया जा सकता है ।

जॉन लिंडक्विस्ट ने अपने उत्कृष्ट egghead.io पृष्ठ पर इस वीडियो का ट्यूटोरियल भी किया है ।

Comments

क्या इसके लिए एक तत्व प्रिंट की आवश्यकता नहीं है?

— hitautodestruct

मैं गंभीर रूप से उलझन में हूँ कि यह किस पर लागू होता है <li ng-repeat = "पेज में [1,2,3,4,5,6]"> <a href="#"> {{पेज}} </ a > </ li> -edit: कभी नहीं मुझे लगता है कि मैं इसे प्राप्त करता

— हूं

मुझे लगता है कि आप केवल प्रदर्शित करने की कोशिश कर रहे हैं, ng-repeat-start/endलेकिन यह एक भ्रामक उदाहरण है और इसके लिए गलत उपयोग का मामला है। एक मानक ng-repeatका उपयोग यहां किया जाना चाहिए क्योंकि आपका कोड liप्रत्येक आइटम के लिए एक अतिरिक्त खाली प्रदान करता है। आपको शायद अपनी पोस्ट में इसका उल्लेख करना चाहिए।

— GFoley83

@ GFoley83 आप सही हैं। लेकिन वह चाहता है कि प्रत्येक पुनरावृत्ति के लिए अतिरिक्त तत्व, ऐसा कुछ जो बिना संभव नहीं है ng-repeat-start। मैं dividerऔर अधिक स्पष्ट होने के लिए अपने उत्तर में html वर्ग जोड़ूंगा।

— jmagnusson

ng-repeat-startऔर ng-repeat-endथोड़ा भ्रमित कर रहे हैं। कोणीय प्रलेखन मदद करता है: https://docs.angularjs.org/api/ng/directive/ngRepeat#special-repeat-start-and-end-points

— perilandmishap

Answer 2

नॉकआउट जेएस कंटेनर रहित बाइंडिंग सिंटैक्स

कृपया मेरे साथ एक दूसरे को सहन करें: नॉकआउट जेएस बाध्यकारी दस्तावेज के foreachनोट 4 में चर्चा के अनुसार अपने बंधन के लिए एक कंटेनर रहित बंधन सिंटैक्स का उपयोग करने का एक अति सुविधाजनक विकल्प प्रदान करता है foreach। http://knockoutjs.com/documentation/foreach-binding.html

जैसा कि नॉकआउट प्रलेखन उदाहरण दिखाता है, आप इस तरह से नॉकआउटJS में अपनी बाध्यकारी लिख सकते हैं:

<ul>
    <li class="header">Header item</li>
    <!-- ko foreach: myItems -->
        <li>Item <span data-bind="text: $data"></span></li>
    <!-- /ko -->
</ul>

मुझे लगता है कि यह दुर्भाग्यपूर्ण है कि AngularJS इस प्रकार के सिंटैक्स की पेशकश नहीं करता है।

---

कोणीय का ng-repeat-startऔरng-repeat-end

ng-repeatसमस्याओं को हल करने के लिए AngularJS तरीके से , मेरे पास जो सैंपल आते हैं, वे उनके (सहायक) उत्तर में लिखे गए jmagnusson प्रकार के होते हैं।

<li ng-repeat-start="page in [1,2,3,4,5]"><a href="#">{{page}}</a></li>
<li ng-repeat-end></li>

इस वाक्यविन्यास को देखने पर मेरा मूल विचार है: वास्तव में? क्यों कोणीय यह सब अतिरिक्त मार्कअप मजबूर कर रहा है कि मैं कुछ नहीं करना चाहता और नॉकआउट में इतना आसान है? लेकिन फिर jmagnusson के जवाब में hitautodestruct की टिप्पणी ने मुझे आश्चर्यचकित करना शुरू कर दिया: अलग-अलग टैग पर एनजी-रिपीट-स्टार्ट और एनजी-रिपीट-एंड के साथ क्या उत्पन्न हो रहा है?

---

उपयोग करने के लिए एक क्लीनर तरीका ng-repeat-startऔरng-repeat-end

हाईटूटोडस्ट्रक्ट के दावे की जांच ng-repeat-endकरने पर, एक अलग टैग पर जोड़ना बिल्कुल वही है जो मैं ज्यादातर मामलों में नहीं करना चाहता, क्योंकि यह पूरी तरह से उपयोगहीन तत्व उत्पन्न करता है: इस मामले में, <li>उनमें कुछ भी नहीं के साथ आइटम। बूटस्ट्रैप 3 की पृष्ठबद्ध सूची सूची आइटमों को स्टाइल करती है ताकि ऐसा लगे कि आपने कोई सुपरफ्लस आइटम नहीं बनाया है, लेकिन जब आप जेनरेट किए गए HTML का निरीक्षण करते हैं, तो वे वहां मौजूद होते हैं।

सौभाग्य से , आपको एक क्लीनर समाधान और html की एक छोटी राशि के लिए बहुत कुछ करने की आवश्यकता नहीं है: बस ng-repeat-endउसी HTML टैग पर घोषणा को रखें जो कि हैng-repeat-start ।

<ul class="pagination">
  <li>
    <a href="#">&laquo;</a>
  </li>    
  <li ng-repeat-start="page in [1,2,3,4,5]" ng-repeat-end><a href="#"></a></li>
  <li>
    <a href="#">&raquo;</a>
  </li>
</ul>

इससे 3 फायदे मिलते हैं:

1. लिखने के लिए कम html टैग
2. बेकार, खाली टैग कोणीय द्वारा उत्पन्न नहीं होते हैं
3. जब दोहराने के लिए सरणी खाली है, तो टैग के साथ ng-repeatउत्पन्न नहीं होगा, आपको एक ही लाभ दे रहा है नॉकआउट के कंटेनर रहित बंधन आपको इस संबंध में देता है

---

लेकिन अभी भी एक क्लीनर तरीका है

आगे कोणीय, के लिए इस मुद्दे पर GitHub में टिप्पणी समीक्षा करने के बाद https://github.com/angular/angular.js/issues/1891 ,
आप का उपयोग करने की जरूरत नहीं ng-repeat-startहै और ng-repeat-endएक ही फायदे प्राप्त करने के लिए। इसके बजाय, फिर से jmagnusson के उदाहरण के लिए धन्यवाद, हम बस जा सकते हैं:

<ul class="pagination">
  <li>
    <a href="#">&laquo;</a>
  </li>
  <li ng-repeat="page in [1,2,3,4,5,6]"><a href="#">{{page}}</a></li>
  <li>
    <a href="#">&raquo;</a>
  </li>
</ul>

तो कब इस्तेमाल करें ng-repeat-startऔर ng-repeat-end? कोणीय प्रलेखन के अनुसार , करने के लिए

... तत्वों की एक श्रृंखला को केवल एक मूल तत्व के बजाय दोहराएं ...

पर्याप्त बात, कुछ उदाहरण दिखाओ!

काफी उचित; जब आप करते हैं और जब आप ng-repeat-endएक ही टैग पर उपयोग नहीं करते हैं, तो यह jsbin पांच उदाहरणों से चलता है ।

http://jsbin.com/eXaPibI/1/

Comments

आपको लगता है कि प्रश्न के बिंदु को गलत समझा है। लक्ष्य दो या दो से अधिक सूची आइटमों को एक साथ दोहराना है, और न ही आपका उदाहरण और न ही वह पृष्ठ जिससे आप इसे पूरा करने का तरीका प्रदान करते हैं। जैसा कि आपने खुद को नोट किया है, एक ही तत्व को संलग्न करना ng-repeat-startऔर ng-repeat-endपूरी तरह से बेकार है जब आप कोणीय के डिफ़ॉल्ट का उपयोग कर सकते हैं ng-repeatऔर इसके साथ किया जा सकता है।

— असद सईदुद्दीन

@ असद - "सवाल का बिंदु" ओपी द्वारा स्पष्ट रूप से नहीं कहा गया है। इसके अलावा, क्या आपने स्वीकृत उत्तर के प्रदान किए गए DOM आउटपुट का निरीक्षण किया है? मैं किसी को भी इस तरह के आउटपुट की कल्पना नहीं कर सकता, कम से कम निश्चित रूप से बूटस्ट्रैप पेजिनेशन सूची के लिए नहीं।

— mg1075

@ mg1075 हां, स्वीकृत उत्तर का आउटपुट अस्वीकार्य है, यही कारण है कि मैंने यहां सभी तरह से नीचे स्क्रॉल किया। प्रश्न का बिंदु बहुत स्पष्ट है: ng-repeatओपी के उपयोग के विकल्प को खोजने या लागू करने का एक तरीका खोजें जो HTML में विरूपण साक्ष्य को ng-repeatसमाप्त करता divहै। आपका उत्तर ऐसा नहीं करता है, क्योंकि liप्रश्न में दो तत्वों के लिए इसका उपयोग करने का कोई तरीका नहीं है । यदि मैं यहां गलत हूं, तो कृपया नमूना मार्कअप प्रदान करें जो divतत्व को खत्म करने के लिए ओपी कोड को एडाप्ट करता है।

— असद सईदुद्दीन

@ असद - प्रश्न का बिंदु स्पष्ट हो जाता अगर ओपी ने अपने इच्छित आउटपुट का एक समाप्त उदाहरण प्रदान किया होता। तथ्य यह है कि वह "स्वीकृत" उत्तर को स्वीकार करता है, जहां स्वीकार किए गए उत्तर अनिवार्य रूप से अनुचित मार्कअप के साथ बूटस्ट्रैप पेजिनेशन का उपयोग करता है, केवल इस मुद्दे को और आगे बढ़ा देता है। उदाहरण 2 जेस्बिन में, यदि वह वास्तव में अभिप्रेत है, तो ओपी की समस्या को उस तरीके से हल करता है जिस तरह से स्वीकृत उत्तर देता है, लेकिन किसी को भी बूटस्ट्रैप पेजिनेशन के लिए उस प्रकार के मार्कअप का उपयोग नहीं करना चाहिए। jsbin.com/eXaPibI/1

— mg1075

असल में, मैंने अभी पहले उत्तर को फिर से देखा और उत्पन्न मार्कअप ओपी के उपयोग के मामले के लिए बिल्कुल सही है, हालांकि यह मेरी आवश्यकताओं को पूरा नहीं करता है। ओपी चाहता है कि एक डिवाइडर liआइटम उत्पन्न हो, जो liआपके जेस्बिन में दिखाई देने वाला अतिरिक्त है ।

— असद सईदुद्दीन

Answer 3

ngRepeat पर्याप्त नहीं हो सकता है, हालाँकि आप इसे कस्टम निर्देश के साथ जोड़ सकते हैं। अगर आपको थोड़ा सा jQuery का मन नहीं है तो आप कोड में विभक्त वस्तुओं को जोड़ने के कार्य को सौंप सकते हैं।

 <li ng-repeat="item in coll" so-add-divide="your exp here"></li>

इस तरह के एक सरल निर्देश को वास्तव में एक विशेषता मूल्य की आवश्यकता नहीं होती है, लेकिन यह आपको कई तरह के व्यवसाय दे सकता है जैसे सशर्त रूप से सूचकांक, लंबाई, आदि के अनुसार एक विभक्त जोड़ना या कुछ पूरी तरह से अलग।

Comments

शांत मैंने एक कस्टम निर्देश जोड़ा और यह काम करता है। इस वीडियो गाइड ने मदद की: youtube.com/watch?v=A6wq16Ow5Ec

— nehz

Answer 4

मुझे हाल ही में एक ही समस्या थी कि मुझे स्पैन और चित्रों का एक मनमाना संग्रह दोहराना था - उनके आसपास एक तत्व होना एक विकल्प नहीं था - हालांकि एक सरल समाधान है, एक "अशक्त" निर्देश बनाएँ:

app.directive("diNull", function() {
        return {
            restrict: "E",
            replace: true,
            template: ""
        };
    });

फिर आप उस तत्व पर एक पुनरावृत्ति का उपयोग कर सकते हैं, जहां element.url उस तत्व के लिए टेम्पलेट को इंगित करता है:

<di-null ng-repeat="element in elements" ng-include="element.url" ></di-null>

यह किसी भी कंटेनर के चारों ओर किसी भी संख्या में विभिन्न टेम्पलेट्स को दोहराएगा

ध्यान दें: हम्म मैं अंधा हो सकता था, जब यह प्रतिपादन करते हुए di-null तत्व को हटा दिया गया था, लेकिन इसे फिर से जाँचना ... यह अभी भी मेरे लेआउट मुद्दों को हल नहीं किया है ... क्यूरोसियर और क्यूरोसियर ...

Comments

replace2.0 से हटा दिया गया है।

— डिमालेक्सएक्सएक्स

मैंने उपरोक्त कोशिश की, लेकिन टेम्पलेट: "" कारण है कि कुछ भी नहीं बदला है। मैंने jsfiddle.net/markcoleman/fMP9s/1 से लिंकर का उपयोग किया और इसे संशोधित किया: लिंक: फ़ंक्शन (कार्यक्षेत्र, तत्व, गुण) {तत्व [0] .outerHTML = ''; $ संकलन (element.contents ()) (गुंजाइश); }

— लॉरी लुबी

Answer 5

एक टिप्पणी निर्देश प्रतिबंध है, लेकिन ngRepeat इसका समर्थन नहीं करता है (क्योंकि इसे दोहराने के लिए एक तत्व की आवश्यकता है)।

मुझे लगता है कि मैंने कोणीय टीम को देखा कि वे टिप्पणी एनजी-रिपीट पर काम करेंगे, लेकिन मुझे यकीन नहीं है। आपको रेपो पर इसके लिए एक मुद्दा खोलना चाहिए। http://github.com/angular/angular.js

Comments

2012 से टिप्पणी करें। क्या यह अभी भी मामला है? उनके प्रलेखन में खोज करने की कोशिश की, और कोई संदर्भ नहीं मिला।

— ज़ैक एस

Answer 6

ऐसा करने के लिए कोई कोणीय जादू का तरीका नहीं है, आपके मामले के लिए आप ऐसा कर सकते हैं, वैध HTML प्राप्त करने के लिए, यदि आप बूटस्ट्रैप का उपयोग कर रहे हैं। तब आपको li.divider को जोड़ने का समान प्रभाव मिलेगा

एक वर्ग बनाएँ:

span.divider {
 display: block;
}

अब अपना कोड इसमें बदलें:

<ul ng-cloak>
 <li div ng-repeat="n in list">
    <a href="{{ n[1] }}">{{ n[0] }}</a>
    <span class="divider"></span>
 </li>
 <li>Additional item</li>
</ul>

Answer 7

एक समाधान के लिए जो वास्तव में काम करता है

एचटीएमएल

<remove  ng-repeat-start="itemGroup in Groups" ></remove>
   html stuff in here including inner repeating loops if you want
<remove  ng-repeat-end></remove>

एक कोणीय जोड़ें। निर्देश

//remove directive
(function(){
    var remove = function(){

        return {    
            restrict: "E",
            replace: true,
            link: function(scope, element, attrs, controller){
                element.replaceWith('<!--removed element-->');
            }
        };

    };
    var module = angular.module("app" );
    module.directive('remove', [remove]);
}());

एक संक्षिप्त विवरण के लिए,

एनजी-रिपीट खुद को बांधता है <remove> तत्व के रूप में और जैसा होना चाहिए, लूप करता है, और क्योंकि हमने एनजी-रिपीट-स्टार्ट / एनजी-रिपीट-एंड का इस्तेमाल किया है, यह एचटीएमएल के ब्लॉक को केवल एक तत्व नहीं बनाता है।

तब कस्टम हटाने का निर्देश देता है <remove>और तत्वों को शुरू और खत्म करता है<!--removed element-->

Comments

यह दिलचस्प है। हालांकि, मेरे परीक्षण के replaceWith(...)परिणाम में एक पाठ नोड में एक टिप्पणी नहीं है, हालांकि। मैंने पाया है कि सिर्फ element.remove()काम करता है।

— आर्टफ्लोरोबोट