Angular.js एनजी-दोहराएं कई tr के पार

Question

मैं एक एप्लिकेशन के लिए Angular.js का उपयोग कर रहा हूं जो कि ट्रड को दिखा कर स्लाइडिंग आउट इफेक्ट का अनुकरण करने के लिए छिपे हुए trs का उपयोग करता है और नीचे की td में div को स्लाइड करता है। इस प्रक्रिया ने इन पंक्तियों की एक सरणी पर पुनरावृति करते समय नॉकआउट.जेएस का उपयोग करते हुए काल्पनिक रूप से काम किया, क्योंकि मैं <!-- ko:foreach -->दोनों tr तत्वों का उपयोग कर सकता था ।

कोणीय के साथ, ng-repeatएक html तत्व पर लागू होना चाहिए, जिसका अर्थ है कि मैं मानक विधियों का उपयोग करके इन दोहरी पंक्तियों को दोहरा नहीं सकता हूं। इसके लिए मेरी पहली प्रतिक्रिया इन दोहरे trs का प्रतिनिधित्व करने के लिए एक निर्देश बनाने के लिए थी, लेकिन यह कम हो गई क्योंकि निर्देश टेम्पलेट्स में एक ही मूल तत्व होना चाहिए, लेकिन मेरे पास दो ( <tr></tr><tr></tr>) हैं।

यदि एनजी-रिपीट और कोणीय अनुभव वाले किसी व्यक्ति ने इसे क्रैक किया है, तो बता सकता है कि इस समस्या को कैसे हल किया जाए, मैं बहुत सराहना करूंगा।

(मुझे यह भी ध्यान रखना चाहिए कि ng-repeattbody को संलग्न करना एक विकल्प है, लेकिन यह कई tbodys पैदा करता है, और मैं मान रहा हूं कि मानक HTML के लिए खराब रूप है, हालांकि गलत होने पर मुझे सही करें)

Answer 1

का उपयोग ng-repeatपर tbodyप्रकट होता है होने के लिए वैध देखना इस पोस्ट ।

एक HTML सत्यापनकर्ता के माध्यम से एक त्वरित परीक्षण ने एक tbodyही तालिका में कई तत्वों की अनुमति दी ।

अद्यतन: कम से कम कोणीय 1.2 के रूप में एक ng-repeat-startऔर ng-repeat-endतत्वों की एक श्रृंखला को दोहराने की अनुमति है। अधिक जानकारी के लिए दस्तावेज़ीकरण देखें और टिप्पणी के लिए @ धन्यवाद पर धन्यवाद!

Comments

बहुत खुबस। मुझे भी यही समस्या थी और वास्तव में ऐसा करने पर बहस हुई, लेकिन मुझे लगा कि tbody टैग पर पुनरावृति करना कभी काम नहीं करेगा। धन्यवाद!

— खलीलरावण

यह अब तथ्य के बाद थोड़ा सा है, लेकिन एंगुलर 1.2 ने एनजी-रिपीट-स्टार्ट और एनजी-रिपीट-एंड निर्देशों को पेश किया, जिससे आप कई तत्वों पर पुनरावृति कर सकें।

— '15:03

@ इसे अभी बहुत बाद में देखा गया है और मैं 1.5 का उपयोग कर रहा हूं, लेकिन एनजी-रिपीट के अतिरिक्त-और स्टार्ट-ऑफ कार्यक्षमता के बारे में नहीं जानता। आपने मेरी ओर इशारा किया इसलिए उत्तर में जानकारी जोड़ने के लिए कभी माफी नहीं मांगी।

— नेविल

एनजी रिपीट डॉक्यूमेंट के लिए यूआरएल गलत है, लेकिन यह बदलाव छह अक्षरों से अधिक नहीं है, इसलिए मैं इसे बिना किसी बेकार मेटा एडिट के एडिट नहीं कर सकता। सही यूआरएल डॉक्स

— बिल

Answer 2

AngularJS डेवलपर @ igor-minar ने इसका जवाब Angular.js एनजी-रिपीट में कई तत्वों में दिया ।

Miško Hevery ने हाल ही में ng-repeat-startऔर के माध्यम से उचित समर्थन लागू किया है ng-repeat-end। यह वृद्धि 1.0.7 (स्थिर) और 1.1.5 (अस्थिर) के रूप में जारी नहीं की गई है।

अपडेट करें

यह अब 1.2.0rc1 में उपलब्ध है। जॉन लिंडक्विस्ट द्वारा आधिकारिक डॉक्स और इस पेंचकस की जाँच करें ।

Comments

उन्होंने 11 जून, 2013 से एंगुलर मीटअप लिवेस्ट्रीम में इसका उल्लेख किया है। एंगुलर 1.1.5+ और कोणीय 2.0 में इस और अन्य विशेषताओं की प्रतीक्षा है।

— thegreenpizza

मैं cdnjs सीडीएन पर 1.1.5 की ओर इशारा कर रहा हूं और यह काम नहीं कर रहा है। //cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js क्या आप जानते हैं कि यह किस संस्करण में उपलब्ध होना चाहिए?

— शनीमल

सही, १.१.५ के रूप में जारी नहीं किया गया था, इसलिए जल्द ही उतरने के लिए १.१.६ (या बहुत संभावना १.२.०) देखें। यहाँ Miško की रिलीज़ के लिए देखने के लिए प्रतिबद्ध है: github.com/angular/angular.js/commit/…

— Anson

यह भी नोटिस करना अच्छा है कि यह हर निर्देश के लिए काम करता है, न केवल ngRepeat;)

— 7hi4g0

Answer 3

कई तत्व मान्य हो सकते हैं, लेकिन यदि आप फिक्स्ड हेडर / फ़ुटर्स के साथ स्क्रॉल करने योग्य ग्रिड बनाने की कोशिश कर रहे हैं, तो यह काम नहीं करेगा। यह कोड निम्नलिखित CSS, jquery और AngularJS को मानता है।

एचटीएमएल

<table id="tablegrid_ko">
        <thead>
            <tr>
                <th>
                   Product Title
                </th>
                <th>
                </th>
            </tr>
        </thead>

        <tbody ng-repeat="item in itemList">
            <tr ng-repeat="itemUnit in item.itemUnit">
                <td>{{itemUnit.Name}}</td>
            </tr>
        </tbody>
</table>

स्क्रॉल करने योग्य टेबल ग्रिड के लिए निश्चित हेडर / पाद बनाने के लिए सीएसएस

#tablegrid_ko {
    max-height: 450px;    
}
#tablegrid_ko
{
border-width: 0 0 1px 1px;
border-spacing: 0;
border-collapse: collapse;
border-style: solid;
}

#tablegrid_ko td, #tablegrid_ko th
{
margin: 0;
padding: 4px;
border-width: 1px 1px 0 0;
border-style: solid;
}


#tablegrid_ko{border-collapse:separate}
#tablegrid_ko tfoot,#tablegrid_ko thead{z-index:1}
#tablegrid_ko tbody{z-index:0}
#tablegrid_ko tr{height:20px}
#tablegrid_ko tr >td,#tablegrid_ko tr >th{
border-width:1px;border-style:outset;height:20px;
max-height:20px;xwidth:45px;xmin-width:45px;xmax-width:45px;white-space:nowrap;overflow:hidden;padding:3px}

#tablegrid_ko tr >th{
background-color:#999;border-color:#2c85b1 #18475f #18475f #2c85b1;color:#fff;font-weight:bold}
#tablegrid_ko tr >td{background-color:#fff}
#tablegrid_ko tr:nth-child(odd)>td{background-color:#f3f3f3;border-color:#fff #e6e6e6 #e6e6e6 #fff}
#tablegrid_ko tr:nth-child(even)>td{background-color:#ddd;border-color:#eaeaea #d0d0d0 #d0d0d0 #eaeaea}

div.scrollable-table-wrapper{
background:#268;border:1px solid #268;
display:inline-block;height:285px;min-height:285px;
max-height:285px;width:550px;position:relative;overflow:hidden;padding:26px 0}

div.scrollable-table-wrapper table{position:static}
div.scrollable-table-wrapper tfoot,div.scrollable-table-wrapper thead{position:absolute}
div.scrollable-table-wrapper thead{left:0;top:0}
div.scrollable-table-wrapper tfoot{left:0;bottom:0}
div.scrollable-table-wrapper tbody{display:block;position:relative;overflow-y:scroll;height:283px;width:550px}

टकी के क्षैतिज स्क्रॉलिंग को बांधने के लिए जेकरी, यह काम नहीं करता है क्योंकि टीओबी एनजी-रिपीट के दौरान दोहराता है।

$(function ($) {

$.fn.tablegrid = function () {


        var $table = $(this);
        var $thead = $table.find('thead');
        var $tbody = $table.find('tbody');
        var $tfoot = $table.find('tfoot');

        $table.wrap("<div class='scrollable-table-wrapper'></div>");

        $tbody.bind('scroll', function (ev) {
            var $css = { 'left': -ev.target.scrollLeft };
            $thead.css($css);
            //$tfoot.css($css);
        });


    }; // plugin function



}(jQuery));

Answer 4

आप इसे इस तरह से कर सकते हैं, जैसा कि मैंने इस उत्तर में दिखाया: https://stackoverflow.com/a/26420732/769900

<tr ng-repeat="m in myData">
   <td>{{m.Name}}</td>
   <td>{{m.LastName}}</td>

   <td ng-if="$first" rowspan="{{myData.length}}">
       <ul>
           <li ng-repeat="d in days">
               {{d.hours}}
           </li>
       </ul>
   </td> 
</tr>