এইচটিএমএল উপাদান ছাড়াই এনজি-রিপিট কীভাবে ব্যবহার করবেন

Question

ng-repeatঅ্যারেতে থাকা সমস্ত উপাদানগুলির তালিকা তৈরি করতে আমার (অ্যাঙ্গুলারজেএসে) ব্যবহার করতে হবে।

জটিলতাটি হ'ল অ্যারের প্রতিটি উপাদান একটি টেবিলের এক, দুই বা তিনটি সারিতে রূপান্তরিত হয়।

আমি বৈধ এইচটিএমএল তৈরি করতে পারি না, যদি ng-repeatকোনও উপাদানটিতে ব্যবহার করা হয়, কারণ কোনও ধরণের পুনরাবৃত্তি উপাদানকে <tbody>এবং এর মধ্যে অনুমোদিত নয় <tr>।

উদাহরণস্বরূপ, আমি যদি এনজি-রিপিট ব্যবহার <span>করি তবে আমি পেতাম:

<table>
  <tbody>
    <span>
      <tr>...</tr>
    </span>
    <span>
      <tr>...</tr>
      <tr>...</tr>
      <tr>...</tr>
    </span>
    <span>
      <tr>...</tr>
      <tr>...</tr>
    </span>
  </tbody>
</table>          

যা অবৈধ এইচটিএমএল।

তবে আমার যা উত্পন্ন করার দরকার তা হ'ল:

<table>
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
    <tr>...</tr>
    <tr>...</tr>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
</table>          

যেখানে প্রথম সারিটি প্রথম অ্যারে উপাদান দ্বারা উত্পাদিত হয়েছিল, পরের তিনটি দ্বিতীয় দ্বারা এবং পঞ্চম এবং ষষ্ঠটি শেষ অ্যারের উপাদান দ্বারা তৈরি হয়েছিল।

এনজি-রিপিটকে আমি কীভাবে এমনভাবে ব্যবহার করতে পারি যে এইচটিএমএল উপাদানটি রেন্ডারিংয়ের সময় এটি 'অদৃশ্য হয়ে যায়'?

নাকি এর আর কোন সমাধান আছে?

---

স্পষ্টকরণ: উত্পন্ন কাঠামোটি নীচের মতো হওয়া উচিত। প্রতিটি অ্যারে উপাদান টেবিলের 1-3 সারির মধ্যে তৈরি করতে পারে। উত্তরের অ্যারে উপাদান অনুসারে 0-n সারিটি আদর্শভাবে সমর্থন করা উচিত।

<table>
  <tbody>
    <!-- array element 0 -->
    <tr>
      <td>One row item</td>
    </tr>
    <!-- array element 1 -->
    <tr>
      <td>Three row item</td>
    </tr>
    <tr>
      <td>Some product details</td>
    </tr>
    <tr>
      <td>Customer ratings</td>
    </tr>
    <!-- array element 2 -->
    <tr>
      <td>Two row item</td>
    </tr>
    <tr>
      <td>Full description</td>
    </tr>
  </tbody>
</table>          

Comments

হতে পারে আপনার "প্রতিস্থাপন: সত্য" ব্যবহার করা উচিত? : এই দেখুন stackoverflow.com/questions/11426114/...

এছাড়াও, কেন আপনি নিজেই এনজি-রিপিট ব্যবহার করতে পারবেন না?

@ টমি, কারণ "অ্যারের প্রতিটি উপাদান একটি টেবিলের দুটি, তিন বা তিনটি সারিতে রূপান্তরিত হবে"। আমি যদি এনজি-রিপিট ব্যবহার trকরি তবে আমি যতদূর বুঝতে পারি অ্যারের উপাদান হিসাবে আমি একটি সারি পেয়ে যাব।

— ফ্যাদবিবি

আচ্ছা আমি দেখি. আপনি মডেলটি পুনরাবৃত্তাকারে ব্যবহার করার আগে কেবল তাকে ফ্ল্যাট করতে পারবেন না?

@ টমি, না trএকটি অ্যারে উপাদান দ্বারা উত্পাদিত 1-3 টি একই কাঠামোটি নেই।

— fadebee

Answer 1

আপডেট: আপনি যদি কৌনিক 1.2+ ব্যবহার করেন তবে এনজি-রিপিট-স্টার্ট ব্যবহার করুন । @ Jmagnusson এর উত্তর দেখুন।

নাহলে, এনজি-রিপিট টিডির উপর রাখার কীভাবে? (আফাইক, এক টেবিলে একাধিক <জন ব্যক্তি> গুলি রাখা ভাল s

<tbody ng-repeat="row in array">
  <tr ng-repeat="item in row">
     <td>{{item}}</td>
  </tr>
</tbody>

Comments

এটি প্রযুক্তিগতভাবে কার্যকর হতে পারে, তবে এটি খুব হতাশার কারণ যে এই সাধারণ ব্যবহারের ক্ষেত্রে উত্তরটি আপনাকে স্বেচ্ছাচারিত (অন্যথায় অপ্রয়োজনীয়) মার্কআপ ইনজেক্ট করতে হবে। আমার একই সমস্যা রয়েছে (সারিগুলির পুনরাবৃত্তি গোষ্ঠী - এক বা একাধিক শিশু টিআর সহ একটি শিরোনাম টিআর, একটি গ্রুপ হিসাবে পুনরাবৃত্তি)। অন্যান্য টেম্পলেট ইঞ্জিনগুলির সাথে তুচ্ছ, অ্যাঙ্গুলারের সাথে সেরা হ্যাকি মনে হয়।

— ব্রায়ান মোসকাউ

একমত। আমি ডিটি + ডিডি উপাদানগুলিতে পুনরাবৃত্তি করার চেষ্টা করছি। একটি অবৈধ মোড়কের উপাদান যোগ না করে এটি করার কোনও উপায় নেই

— ডেভিড লিন

@ ডেভিডলিন, কৌণিক ভি 1 .2 এ (যখনই এটি প্রকাশিত হবে) আপনি একাধিক উপাদানগুলির পুনরাবৃত্তি করতে সক্ষম হবেন, উদাহরণস্বরূপ, তারিখ এবং ডিডি: youtube.com/watch?v=W13qDdJDHp8&t=17m28s

— মার্ক রাজকক

কনটেনারহীন নিয়ন্ত্রণ প্রবাহ সিনট্যাক্স ব্যবহার করে নকআউটজেএস-এ এটি মার্জিতভাবে পরিচালনা করা হয়: নকআউটজেএসস / ডকুমেন্টেশন / ফরোচ- বাইন্ডিং । Html । আশা করি শীঘ্রই কৌনিক কিছু অনুরূপ করতে দেখবেন।

— কোরি হাউস

এই উত্তরটি পুরানো, ব্যবহার পরিবর্তে NG-পুনরাবৃত্তি শুরু

— iwein

Answer 2

AngularJS 1.2 হিসাবে একটি নির্দেশিকা বলা হয়েছে ng-repeat-startযা আপনার জন্য অনুরোধটি ঠিক তাই করে। এটি কীভাবে ব্যবহার করতে হয় তার বিবরণের জন্য এই প্রশ্নের আমার উত্তরটি দেখুন ।

Comments

কৌণিক ধরা পড়েছে, এটি এখন সঠিক সমাধান।

— আইভেন

Answer 3

আপনি যদি এনজি> 1.2 ব্যবহার করেন, এখানে ng-repeat-start/endঅপ্রয়োজনীয় ট্যাগ তৈরি না করে ব্যবহার করার একটি উদাহরণ এখানে দেওয়া হয়েছে :

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script>
      angular.module('mApp', []);
    </script>
  </head>
  <body ng-app="mApp">
    <table border="1" width="100%">
      <tr ng-if="0" ng-repeat-start="elem in [{k: 'A', v: ['a1','a2']}, {k: 'B', v: ['b1']}, {k: 'C', v: ['c1','c2','c3']}]"></tr>

      <tr>
        <td rowspan="{{elem.v.length}}">{{elem.k}}</td>
        <td>{{elem.v[0]}}</td>
      </tr>
      <tr ng-repeat="v in elem.v" ng-if="!$first">
        <td>{{v}}</td>
      </tr>

      <tr ng-if="0" ng-repeat-end></tr>
    </table>
  </body>
</html>

গুরুত্বপূর্ণ পয়েন্ট: পৃষ্ঠায় সন্নিবেশ করাতে না দেওয়ার জন্য ব্যবহৃত ng-repeat-startও ng-repeat-endসেট ট্যাগগুলির জন্য ng-if="0"। এইভাবে অভ্যন্তরীণ সামগ্রীটি নকআউটজে (কমান্ড ইন ব্যবহার করে <!--...-->) ঠিক তেমনভাবে পরিচালনা করা হবে এবং কোনও আবর্জনা থাকবে না।

Comments

এনজি-ইফ = "0" সেট করার পরে, এটি এনজি-রিপিট-এন্ড মিলছে না বলে ত্রুটি ছুঁড়ে ফেলেছে।

— ভিকি এমসিটিএস

Answer 4

আপনি আপনার নিয়ামকের মধ্যে ডেটা সমতল করতে চাইতে পারেন:

function MyCtrl ($scope) {
  $scope.myData = [[1,2,3], [4,5,6], [7,8,9]];
  $scope.flattened = function () {
    var flat = [];
    $scope.myData.forEach(function (item) {
      flat.concat(item);
    }
    return flat;
  }
}

এবং তারপরে এইচটিএমএলে:

<table>
  <tbody>
    <tr ng-repeat="item in flattened()"><td>{{item}}</td></tr>
  </tbody>
</table>

Comments

না এইটা না. কোনও এনজিপিপিট এক্সপ্রেশনের ভিতরে কোনও ফাংশন কল করার পরামর্শ দেওয়া একেবারেই প্রস্তাবিত নয়

— নিক

আমার ক্ষেত্রে, আমি প্রতিটি উপাদান যেখানে সূচির জন্য একটি বিভাজক যোগ করার জন্য প্রয়োজন ছিল = 0 এবং! ng-repeat-start, ng-repeat-end, তাই সমাধান করুন এবং নতুন Var প্রতিটি উপাদান আগে এই বিভাজক বস্তুর যোগ করার সময় একটি অতিরিক্ত পরিবর্তনশীল তৈরি করতে ছিল বারবার আমার নকশা ভঙ্গ: <div class="c477_group"> <div class="c477_group_item" ng-repeat="item in itemsWithSeparator" ng-switch="item.id" ng-class="{'-divider' : item.id == 'SEPARATOR'}"> <div class="c478" ng-switch-when="FAS"/> <div class="c478" ng-switch-when="SEPARATOR" /> <div class="c479" ng-switch-default /> </div> </div>

— hermeslm

Answer 5

উপরেরটি সঠিক তবে আরও সাধারণ উত্তরের জন্য এটি যথেষ্ট নয়। আমার এনজি-রিপিট বাসা বাঁধতে হবে, তবে একই এইচটিএমএল স্তরে থাকুন, মানে একই প্যারেন্টে উপাদানগুলি লিখুন। ট্যাগ অ্যারেতে ট্যাগ (গুলি) থাকে যাতে একটি ট্যাগ অ্যারেও থাকে। এটি আসলে একটি গাছ।

[{ name:'name1', tags: [
  { name: 'name1_1', tags: []},
  { name: 'name1_2', tags: []}
  ]},
 { name:'name2', tags: [
  { name: 'name2_1', tags: []},
  { name: 'name2_2', tags: []}
  ]}
]

সুতরাং এখানে আমি অবশেষে কি।

<div ng-repeat-start="tag1 in tags" ng-if="false"></div>
    {{tag1}},
  <div ng-repeat-start="tag2 in tag1.tags" ng-if="false"></div>
    {{tag2}},
  <div ng-repeat-end ng-if="false"></div>
<div ng-repeat-end ng-if="false"></div>

এনজি-ইফ = "মিথ্যা" নোট করুন যা শুরু এবং শেষের ভাগগুলি গোপন করে।

এটি মুদ্রণ করা উচিত

NAME1, name1_1, name1_2, NAME2, NAME2_1, name2_2,

Answer 6

আমি শুধু মন্তব্য করতে চাই, কিন্তু আমার খ্যাতি এখনও অভাব আছে। সুতরাং আমি আরও একটি সমাধান যুক্ত করছি যা সমস্যাটিও সমাধান করে। আমি @ bmoeskau যে বক্তব্যটি খণ্ডন করতে চাই তা সত্যিই খণ্ডন করতে চাই যে এই সমস্যাটি সমাধান করার জন্য একটি 'সর্বোত্তম হ্যাকি' সমাধান দরকার, এবং যেহেতু এই পোস্টটি 2 বছরের পুরানো হলেও এটি একটি আলোচনায় উঠে এসেছিল, আমি আমার যুক্ত করতে চাই দুটি সেন্টের মালিক:

@ বিটিফোর্ড যেমন উল্লেখ করেছেন, আপনি মনে করছেন একটি পুনরাবৃত্ত কাঠামোকে একটি তালিকায় পরিণত করার চেষ্টা করছেন, সুতরাং আপনার সেই কাঠামোটি প্রথমে একটি তালিকায় পরিণত করা উচিত। তার সমাধানটি তা করে তবে একটি মতামত রয়েছে যে টেমপ্লেটের অভ্যন্তরে ফাংশনটি কল করা অসম্পূর্ণ। যদি এটি সত্য হয় (সত্যই, আমি জানি না) কেবল নির্দেশকের পরিবর্তে নিয়ামকটিতে ফাংশন সম্পাদন করা প্রয়োজন হবে না?

যেভাবেই হোক, আপনার এইচটিএমএলটির একটি তালিকা প্রয়োজন, সুতরাং যে স্কোপটি এটি রেন্ডার করে তা কাজ করার জন্য সেই তালিকাটি থাকা উচিত। আপনাকে কেবল আপনার নিয়ামকের অভ্যন্তরে কাঠামো চ্যাপ্টা করতে হবে। আপনার একবার $ সুযোগ.আরও অ্যারে হয়ে গেলে আপনি একক, সাধারণ এনজি-রিপিট দিয়ে টেবিলটি তৈরি করতে পারেন। কোনও হ্যাকিং, কোনও অসহায়তা নয়, কেবল এটি কাজ করার জন্য ডিজাইন করা হয়েছিল।

অ্যাঙ্গুলার নির্দেশাবলী কার্যকারিতা অভাব নেই। তারা কেবল আপনাকে বৈধ এইচটিএমএল লিখতে বাধ্য করে। আমার এক সহকর্মীর কাছে একই রকম সমস্যা ছিল, অ্যাঙ্গুলারদের টেম্প্লেটিং / রেন্ডারিং বৈশিষ্ট্যগুলি নিয়ে সমালোচনার সমর্থনে @ বমোসকাউকে উদ্ধৃত করে। সঠিক সমস্যার দিকে তাকালে, দেখা গেল যে তিনি কেবল একটি খোলার ট্যাগ তৈরি করতে চেয়েছিলেন, তারপরে অন্য কোথাও একটি ঘনিষ্ঠ ট্যাগ ইত্যাদি just ঠিক আগের দিনগুলিতে যেমন আমরা স্ট্রিংগুলি থেকে আমাদের এইচটিএমএলকে আঁকিয়ে রাখি .. ঠিক? কোন।

কাঠামোটিকে একটি তালিকাতে সমতল করার জন্য, এখানে আরও একটি সমাধান রয়েছে:

// assume the following structure
var structure = [
    {
        name: 'item1', subitems: [
            {
                name: 'item2', subitems: [
                ],
            }
        ],
    }
];
var flattened = structure.reduce((function(prop,resultprop){
    var f = function(p,c,i,a){
        p.push(c[resultprop]);
        if (c[prop] && c[prop].length > 0 )
          p = c[prop].reduce(f,p);
        return p;
    }
    return f;
})('subitems','name'),[]);

// flattened now is a list: ['item1', 'item2']

এটি উপ-আইটেমযুক্ত গাছের মতো কাঠামোর জন্য কাজ করবে will আপনি যদি কোনও সম্পত্তির পরিবর্তে পুরো আইটেমটি চান তবে আপনি চাটুকারের কাজটি আরও ছোট করতে পারেন।

আশা করি এইটি কাজ করবে.

Comments

সুন্দর. যদিও এটি সরাসরি আমাকে সহায়তা করেনি এটি আমার মনের অন্য সমাধানে উন্মুক্ত করেছিল। অনেক ধন্যবাদ!

— মারিয়ান জুবুরিয়া

Answer 7

একটি সমাধান যা সত্যই কাজ করে for

এইচটিএমএল

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

Answer 8

<table>
  <tbody>
    <tr><td>{{data[0].foo}}</td></tr>
    <tr ng-repeat="d in data[1]"><td>{{d.bar}}</td></tr>
    <tr ng-repeat="d in data[2]"><td>{{d.lol}}</td></tr>
  </tbody>
</table>

আমি মনে করি এটি বৈধ :)

Comments

এটি কাজ করার সময়, অ্যারেতে তিনটি উপাদান থাকলে এটি কাজ করবে।

— বিটিফোর্ড

কেবল নিশ্চিত করুন যে অ্যারেতে 3 টি উপাদান রয়েছে, এমনকি তারা খালি অ্যারে হলেও (খালি অ্যারে দিয়ে এনজি-রিপিট কেবল কোনও কিছু রেন্ডার করবেন না)।

— রেনান তোমল ফার্নান্দেস

আমার বক্তব্যটি হ'ল ওপি সম্ভবত একটি সমাধান চায় যা অ্যারেতে পরিবর্তনশীল সংখ্যক আইটেমের জন্য কাজ করে। আমি ধরে নিলাম হার্ডকোডিংটি "এই অ্যারেতে অবশ্যই তিনটি আইটেম থাকতে হবে" টেমপ্লেটে একটি দুর্বল সমাধান হবে।

— বিটিফোর্ড

তাঁর প্রশ্নের শেষ মন্তব্যে তিনি বলেছিলেন যে উপাদানগুলির একই কাঠামো থাকবে না, সুতরাং প্রতিটি কাঠামোর হার্ডকোডিং অনিবার্য।

— রেনান তোমল ফার্নান্দেস