Angular.js একাধিক tr এর জুড়ে এনজি-পুনরাবৃত্তি

Question

আমি একটি অ্যাপ্লিকেশনের জন্য অ্যাঙ্গুলার.জেএস ব্যবহার করছি যা টিআরটি দেখিয়ে এবং নীচের টিডিতে ডিভিডটি স্লাইড করে স্লাইডিং আউট এফেক্ট সিমুলেশনের জন্য লুকানো টিআরএস ব্যবহার করে। এই সারিগুলির একটি অ্যারের উপরে পুনরাবৃত্তি করার সময় নকআউট.জেএস ব্যবহার করে এই প্রক্রিয়াটি দুর্দান্তভাবে কাজ করেছে, কারণ আমি <!-- ko:foreach -->উভয়ই টিআর উপাদান ব্যবহার করতে পারি ।

কৌণিক সহ, ng-repeatএকটি এইচটিএমএল উপাদান প্রয়োগ করা আবশ্যক, মানে আমি আদর্শ পদ্ধতি ব্যবহার করে এই ডাবল সারিগুলি পুনরাবৃত্তি করতে পারি না। এই বিষয়ে আমার প্রথম প্রতিক্রিয়া ছিল এই ডাবল টিআরএসকে উপস্থাপনের জন্য একটি নির্দেশিকা তৈরি করা, তবে এটি হ্রাস পেয়েছে কারণ নির্দেশিকা টেম্পলেটগুলির অবশ্যই একটি একক মূল উপাদান থাকতে পারে তবে আমার দুটি ( <tr></tr><tr></tr>) রয়েছে।

যদি এনজি-রিপিট এবং কৌনিকের সাথে অভিজ্ঞতা রয়েছে এমন কেউ যদি এই ক্র্যাক করেছে তবে এই সমস্যাটি কীভাবে সমাধান করা যায় তা ব্যাখ্যা করতে পারলে আমি প্রশংসা করব।

(আমার এও লক্ষ্য করা উচিত যে ng-repeatটিডির সাথে সংযুক্তি করা একটি বিকল্প, তবে এটি একাধিক টিবিডি তৈরি করে এবং আমি মানী এইচটিএমএলটির পক্ষে এটি খারাপ রূপ বলে ধরে নিচ্ছি, যদিও আমি ভুল হলে আমাকে সংশোধন করি)

Answer 1

ব্যবহার ng-repeatকরে এই পোস্টটিtbody বৈধ বলে মনে হচ্ছে ।

এইচটিএমএল ভ্যালিডেটরের মাধ্যমে একটি দ্রুত পরীক্ষা tbodyএকই টেবিলে একাধিক উপাদানকে মঞ্জুরি দেয় ।

আপডেট: কমপক্ষে কৌণিক 1.2 হিসাবে কিছু রয়েছে ng-repeat-startএবং ng-repeat-endবিভিন্ন উপাদানকে পুনরাবৃত্তি করার অনুমতি দেয়। আরও তথ্যের জন্য ডকুমেন্টেশন দেখুন এবং মন্তব্যের জন্য @ অনাইটকে ধন্যবাদ!

Comments

ফ্যান্টাস্টিক। আমার একই সমস্যা ছিল এবং আসলে এটি করতে বিতর্ক হয়েছিল তবে আমি ভেবেছিলাম এটি কখনই টবি ট্যাগের উপর পুনরাবৃত্তি করে কাজ করবে না। ধন্যবাদ!

— খলিল রাভান্না

এটি এখন সত্যের পরে কিছুটা হলেও, কৌণিক 1.2 আপনাকে এনজি-রিপিট-স্টার্ট এবং এনজি-রিপিট-এন্ড দিকনির্দেশগুলি আপনাকে একাধিক উপাদানগুলির মাধ্যমে পুনরাবৃত্তি করার অনুমতি দেয় introduced

— অনাইট

@ ওনাইট এটি এখন অনেক পরে এবং আমি এএস 1.5 ব্যবহার করছি তবে এনজি-রিপিটের অ্যাড-এন্ড এবং-স্টার্ট কার্যকারিতা সম্পর্কে জানতাম না। আপনি আমার সেখানে উল্লেখ করেছেন তাই উত্তরে তথ্য যুক্ত করার জন্য কখনও ক্ষমা চাইবেন না।

— নেভিল

এনজি রিপিট ডকুমেন্টেশনের ইউআরএলটি ভুল তবে পরিবর্তনটি ছয়টি অক্ষরের চেয়ে বেশি নয় তাই আমি কেবল কিছু অকেজো মেটা সম্পাদনা যুক্ত না করেই এটিকে সম্পাদনা করতে পারি না .. সঠিক url টি ডকস.আঙ্গুলারজস.আর.ইউপি / এনপি /

— বিল রাউলিনসন

Answer 2

AngularJS বিকাশকারী @ igor-minar একাধিক উপাদান জুড়ে Angular.js এনজি-রিপিটে এর উত্তর দিয়েছে ।

মিউকো হেভারি সম্প্রতি ng-repeat-startএবং এর মাধ্যমে যথাযথ সমর্থন প্রয়োগ করেছে ng-repeat-end। এই বর্ধিতকরণটি 1.0.7 (স্থিতিশীল) এবং 1.1.5 (অস্থির) হিসাবে প্রকাশিত হয়নি।

হালনাগাদ

এটি এখন 1.2.0rc1 এ উপলব্ধ। পরীক্ষা করে দেখুন কর্মকর্তা ডক্স এবং এই স্ক্রীণকাস্ট জন লিন্ড দ্বারা।

Comments

তিনি ১১ ই জুন, ২০১৩ থেকে অ্যাঙ্গুলার মিলআপ লাইভ স্ট্রিমে এটি উল্লেখ করেছেন Ang কৌণিক ১.১.৫+ এবং কৌণিক ২.০ এ এই এবং অন্যান্য বৈশিষ্ট্যগুলির অপেক্ষায় রয়েছেন।

— thegreenpizza

আমি সিডিএনজেএস সিডিএন-তে 1.1.5-এ নির্দেশ করছি এবং এটি কাজ করছে না। //cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js আপনি কি জানেন যে এটি কোন সংস্করণে উপলব্ধ রয়েছে?

— শানিমাল

সঠিক, 1.1.5 হিসাবে প্রকাশিত হয়নি, সুতরাং শীঘ্রই অবতরণ করতে 1.1.6 (বা খুব সম্ভবত 1.2.0) দেখুন। মুক্তির জন্য দেখার জন্য মিনিকোর প্রতিশ্রুতি দেওয়া হল: github.com/angular/angular.js/commit/…

— আনসন

এছাড়াও লক্ষ্য করা ভাল যে এটি প্রতিটি নির্দেশের জন্যই কাজ করে, কেবল এনজিপিটিটই নয়;)

— 7h4g0

Answer 3

একাধিক উপাদান থাকা বৈধ হতে পারে তবে আপনি যদি স্থির শিরোনাম / পাদচুক্তি সহ একটি স্ক্রোলযোগ্য গ্রিড তৈরি করার চেষ্টা করছেন তবে অনুসরণটি কার্যকর হবে না। এই কোডটি নিম্নলিখিত সিএসএস, 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}

টিউবসের অনুভূমিক স্ক্রোলিংকে আবদ্ধ করতে Jquery, এটি কাজ করে না কারণ এনজি-রিপিটের সময় tbody পুনরাবৃত্তি করে।

$(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>