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

এই প্রশ্নটি এখানে আংশিকভাবে সম্বোধন করা হয়েছে: একাধিক টিআর এর মধ্যে Angular.js এনজি-রিপিট

তবে এটি আসলে একটি কাজ মাত্র, এটি আসলে মূল সমস্যাটির দিকে লক্ষ্য রাখে না, যা হ'ল: কোনও মোড়ক ছাড়াই কীভাবে একাধিক উপাদান জুড়ে এনজি-রিপিট ব্যবহার করা যায়?

উদাহরণস্বরূপ, jquery.accordion এর জন্য আপনাকে এইচ 3 এবং ডিভ উপাদানটি পুনরাবৃত্তি করতে হবে, এনজি-পুনরাবৃত্তি দিয়ে কেউ কীভাবে এটি করতে পারে?

— ভৌগলিক
সূত্র

উত্তর:

159

আমাদের এখন এটির জন্য যথাযথ সমর্থন রয়েছে, দয়া করে দেখুন:

AngularJs Commmit

এই পরিবর্তন দ্বারা আপনি এখন করতে পারেন:

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

— ইগর মিনার
সূত্র

যদি এটি অন্য কাউকে সহায়তা করে ... এটি অ্যাঙ্গুলারজেএস.আর.আরসিজে ওয়েবসাইটে স্থিতিশীল, এবং অ্যানগুলারজেগুলির অস্থির বিল্ডের মধ্যেও পাওয়া যায় নি। : কিভাবে-থেকে এখানে - এই কাজ করে তার জন্য আমি Angular.js এর bleeding-edge ইনস্টল করার ছিল stackoverflow.com/questions/17501052/...

— geoidesic

@ জিওয়েডিসিকের পরামর্শ অনুসারে, এটি 1.1.5-এর পরে অবতরণ করেছে, তাই এটির জন্য 1.1.6 (বা খুব সম্ভবত 1.2.0) এ দেখুন

— আনসন

কেবলমাত্র যোগ করতে হবে যে এনজি-রিপিট-

— স্টার্টটি

এবং যদি দ্বিতীয় <tr> নিজেই একটি "নেস্টেড" পুনরাবৃত্তি হয়? উদাহরণস্বরূপ: <টিআর এনজি-রিপিট-স্টার্ট = ".."> </tr> <টিআর এনজি-রিপিট = "সোথিংগেলিজ" এনটি-রিপিট-স্টপ> </tr>

— আন্দ্রে

@ আন্ড্রে এটি করবেন না বরং আপনার প্রথম এনজি-রিপিটের মধ্যে একটি নতুন নির্দেশ তৈরি করুন।

— জিওএইডসিক

কোনও টেবিলে এনজি-রিপিটের 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 উদাহরণ

— হ্যাকফ্যান
সূত্র

এই কাজটি পাওয়ার চেষ্টা করছি তবে আমি কেবলই পাচ্ছি: নির্বিঘ্ন বৈশিষ্ট্য, পাওয়া গেছে 'এনজি-রিপিট-স্টার্ট' তবে কোনও মিল নেই 'এনজি-রিপিট-এন্ড'। এটি কি আর কাজ করে না? কৌণিক 1.5 ব্যবহার করুন

— স্টিবায়ে

আপডেট : এই উত্তরটি পুরানো। দয়া করে @ ইগরমিনার উত্তর দেখুন এবং মানক ng-repeat-startএবং ng-repeat-endনির্দেশাবলী ব্যবহার করুন ।

~~দুটি বিকল্প রয়েছে:~~

প্রথম বিকল্পটি হ'ল একটি নির্দেশ তৈরি করা যা বিভিন্ন ট্যাগ রেন্ডার করে এবং সোর্স ট্যাগ ( জেএসফিডাল ) প্রতিস্থাপন করবে

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

— ভিটোর
সূত্র

শুনে ভালো লাগছে. আমি যদিও এর কিছুই বুঝতে পারি না! আপনার প্রথম উদাহরণে আমি এনজি-রিপিট দেখতে পাচ্ছি না, সুতরাং এটি কীভাবে প্রাসঙ্গিক তা আমি নিশ্চিত নই (আমি ফিডলের দিকে তাকিয়েছিলাম তবে এটি এত জটিল যে আমি মাথা বা লেজ বানাতে পারি না)। আপনার দ্বিতীয় উদাহরণটি আমার কাছে কেবল গাবলডগুক।

— জিওএডসিক

প্রথম উদাহরণটি সমস্যার সমাধান করে না কারণ আপনি এখনও দুটি উপাদানের চারপাশে একটি পুনরাবৃত্তি মোড়ানো দিয়ে শেষ করেছেন ... অর্থাত্ এনজি-রিপিট নির্দেশিকা যুক্ত উপাদানটিও পুনরাবৃত্তি হয়ে যায় - আমি কেবল চাই অভ্যন্তরীণ উপাদানগুলি পুনরাবৃত্তি করা হোক।

— জিওএডসিক

@ user2448430 না, আপনি করবেন না। element.replaceWith(newElement);আপনার যা প্রয়োজন তা মোড়ানো ট্যাগ প্রতিস্থাপন করবে। এছাড়াও আপনি আপনার নির্দেশনায় লুপ রাখতে পারেন এবং টিএমপিএলে আপনার প্রয়োজন হিসাবে অনেকগুলি ট্যাগ যুক্ত করতে পারেন।

— ভিটোরে

আমি একমত নই এটি চেষ্টা করে এবং এটি এনজি-পুনরাবৃত্তি নির্দেশিকা যুক্ত উপাদানটির পুনরাবৃত্তি করে। এছাড়াও দ্বিতীয় উদাহরণটি আসলে কাজ করছে না। ডিভি পুনরাবৃত্তি করে না, এটি কেবল অ্যারে যা আপনার পিএনকেআর উদাহরণে আউটপুট হচ্ছে।

— জিওএইডসিক

@ জোশগফ এটি করে, তাই আমি এই স্প্যানগুলি গোপন করার জন্য আমার সিএসএসে নিয়ম যুক্ত করছি।

— ভিটোরে