কোনও এইচটিএমএল উপাদান ছাড়াই কৌণিক জেএস এনজি-পুনরাবৃত্তি

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>উপাদানটি কিছু ব্রাউজারগুলিতে খুব সামান্য রেন্ডারিং ত্রুটি ঘটায়। আমি জানতে চাই ডিভ ধারক ছাড়া এনজি-রিপিট করার একটি উপায় বা একই প্রভাব অর্জনের জন্য কোনও বিকল্প পদ্ধতি is

Comments

আপনি কোন রেন্ডারিংয়ের বিষয়ে কথা বলছেন?

— জ্যাক

শেষ লি বিভাজকটিকে তার স্ট্যাকড (ক্রোম উইন 7) এর মতো কিছুটা ঘন মনে হয়। এটি একটি সিএসএস সমস্যা হতে পারে, তবে আমি এটি জানতে চাই যে এটি কৌণিক ক্ষেত্রে স্থির করা যেতে পারে। তুলনার জন্য, নকআউটজেএস <! - -> ব্যবহার করে ধারকহীন বাঁধাইয়ের অনুমতি দেয়।

— nehz

আমি দেখতে পাচ্ছি, সার্ভারের দিকে আমি পিটিপিএল ব্যবহার করি এবং তাদের লক্ষ্য: বিশেষত এই উদ্দেশ্যে ব্লক ট্যাগ রয়েছে :) অনুমান করুন যে ডোম সর্বদা একটি নতুন ধরণের ট্যাগকে কৌনিক সহ শক্ত না করে গ্রহণ করে না

— জ্যাক

আপনি কীভাবে htmlAppendনির্দেশনাটি ব্যবহার করছেন তা প্রতিবিম্বিত করতে আপনি কি এইচটিএমএল আপডেট করতে পারবেন ?

— নিক

সম্পন্ন ... কিছুক্ষণ আগে এটি করেছিলেন তবে আমার এটি কাজ করা মনে আছে

— নেহজ

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>

একটি কার্যকরী উদাহরণ এখানে পাওয়া যাবে ।

জন লিন্ডকুইস্টের তার দুর্দান্ত ডিমের পাতা.আইও পৃষ্ঠাতে এটির একটি ভিডিও টিউটোরিয়াল রয়েছে ।

Comments

এর জন্য কি কোনও উপাদান মুদ্রণের প্রয়োজন নেই?

— hitautodestruct

এটি [<1,2,3,4,5,6] "> <a href="#"> {{পৃষ্ঠা}} </ a- তে কেবল <li ng-repeat =" পৃষ্ঠায় যা অর্জন করেছে আমি মারাত্মকভাবে বিভ্রান্ত > </ li> - সম্পাদনা: আমার মনে হয় আমি এটি

— পেয়েছি

আমি পেয়েছি আপনি কেবল প্রদর্শনের চেষ্টা করছেন ng-repeat-start/endতবে এটি একটি বিভ্রান্তিকর উদাহরণ এবং এর জন্য ভুল ব্যবহারের ক্ষেত্রে। ng-repeatআপনার কোড liপ্রতিটি আইটেমের জন্য অতিরিক্ত খালি রেন্ডার করায় একটি স্ট্যান্ডার্ড এখানে ব্যবহার করা উচিত । আপনার পোস্টে অবশ্যই এটি উল্লেখ করা উচিত।

— GFoley83

@ GFoley83- এ আপনি সঠিক আছেন। কিন্তু তিনি প্রতিটি পুনরাবৃত্তির জন্য যে অতিরিক্ত উপাদান এমন কিছু বিষয় যা ছাড়া সম্ভব নয় চান বলে মনে হয় ng-repeat-start। dividerআরও উত্তর পরিষ্কার করার জন্য আমি এইচটিএমএল ক্লাস যুক্ত করব ।

— jmagnusson

ng-repeat-startএবং ng-repeat-endকিছুটা বিভ্রান্তিকর কৌণিক ডকুমেন্টেশন সহায়তা করে: https://docs.angularjs.org/api/ng/directive/ngRepeat#sp

— Special

Answer 2

নকআউটজেএস ধারকবিহীন বাঁধাই সিনট্যাক্স

দয়া করে আমার সাথে এক সেকেন্ড সহ্য করুন: নকআউটজেএস বাঁধাইয়ের ডকুমেন্টেশনের foreachনোট 4-তে আলোচিত হিসাবে তার বাঁধার জন্য একটি ধারকহীন বাঁধাই সিনট্যাক্স ব্যবহার করার একটি অতি-সুবিধাজনক বিকল্প প্রস্তাব করে foreach। http://knockoutjs.com/docamentation/foreach-b बाइंड। html

নকআউট ডকুমেন্টেশনের উদাহরণটি যেমন চিত্রিত করেছে, আপনি নাকআউটজেএস-এ আপনার বাঁধাইটি লিখতে পারেন:

<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সমস্যাগুলি সমাধান করার জন্য কৌণিক জেএস পদ্ধতিতে, আমি যে নমুনাগুলিটি দেখতে পাই সেগুলি হ'ল তার (সহায়ক) উত্তরে পোস্ট করা ধরণের ঝ্মনগসন।

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

এই বাক্যবিন্যাসটি দেখার পরে আমার মূল চিন্তাটি: সত্যই? কেন এঙ্গুলার এই সমস্ত অতিরিক্ত মার্কআপকে বাধ্য করছে যে আমি কিছুই করতে চাই না এবং এটি নকআউটে এত সহজ? তবে তারপরে হিমিউডোডাস্ট্রাক্টর মন্তব্যে জ্যামাগনসনের উত্তরে আমার অবাক হওয়া শুরু হয়েছিল: এনজি-রিপিট-স্টার্ট এবং এনজি-রিপিট-এন্ড পৃথক ট্যাগের সাথে কী উত্পন্ন হচ্ছে?

---

ব্যবহারের একটি পরিষ্কার উপায় ng-repeat-startএবংng-repeat-end

হাইটাটোডস্ট্রাক্টের দৃser় তদন্তের পরে, ng-repeat-endএকটি পৃথক ট্যাগে যুক্ত করা ঠিক আমার মতো বেশিরভাগ ক্ষেত্রে করতে চাই না , কারণ এটি একেবারে অকেজো উপাদানগুলি তৈরি করে: এই ক্ষেত্রে <li>আইটেমগুলির মধ্যে কিছুই নেই। বুটস্ট্র্যাপ 3 এর পৃষ্ঠাযুক্ত তালিকা তালিকাগুলি স্টাইল করে যাতে দেখে মনে হয় যে আপনি কোনও অতিরিক্ত অতিরিক্ত আইটেম উত্পন্ন করেন নি, তবে আপনি যখন উত্পন্ন এইচটিএমএল পরিদর্শন করেন তখন সেগুলি সেখানে থাকে।

ভাগ্যক্রমে , আপনার একটি ক্লিনার সমাধান এবং কম সংখ্যক এইচটিএমএল পাওয়ার জন্য খুব বেশি কিছু করার দরকার নেই: কেবলমাত্র 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একই ট্যাগ ব্যবহার করেন না তখন কী ঘটে তার পাঁচটি উদাহরণ দিয়ে যায় ।

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

Comments

আপনি মনে করছেন যে প্রশ্নটির বিন্দুটি ভুল বুঝেছেন। লক্ষ্যটি হ'ল এক সাথে দুটি বা ততোধিক তালিকাগুলি পুনরাবৃত্তি করা, এবং আপনার উদাহরণ বা পৃষ্ঠাগুলি আপনি এটি সম্পাদন করার জন্য কোনও উপায় সরবরাহ করেন নি। যেমন আপনি নিজেকে লক্ষ্য করেছেন, সংযুক্তি ng-repeat-startএবং ng-repeat-endএকই উপাদানটি সম্পূর্ণভাবে অকেজো যখন আপনি কৌনিক ডিফল্ট ব্যবহার করতে পারেন ng-repeatএবং এটি দিয়ে সম্পন্ন করতে পারেন।

— আসাদ সাইদুদ্দীন

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

— এমজি 1075

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

— আসাদ সাইদুদ্দীন

@ আসাদ - ওপি তার উদ্দেশ্য অনুযায়ী আউটপুটটির একটি সমাপ্ত উদাহরণ সরবরাহ করে যদি প্রশ্নটির বিষয়টি আরও স্পষ্ট হত। সত্য যে তিনি "স্বীকৃত" উত্তরটি গ্রহণ করেছেন, যেখানে গৃহীত উত্তরটি মূলত অপ্রয়োজনীয় মার্কআপ সহ বুটস্ট্র্যাপ পৃষ্ঠাগুলি ব্যবহার করে, কেবল বিষয়টিটিকে আরও জটিল করে তুলেছিল। জেসবিনে উদাহরণ 2 উদাহরণস্বরূপ, যদি এটি হ'ল প্রকৃত উদ্দেশ্য হয় তবে ওপি'র সমস্যাটি যেমন স্বীকৃত উত্তরটি দেয় তেমন সমাধান করে তবে বুটস্ট্র্যাপ পৃষ্ঠাগুলি জন্য কারওরাই সেই ধরণের মার্কআপ ব্যবহার করা উচিত নয়। jsbin.com/eXaPibI/1

— mg1075

প্রকৃতপক্ষে, আমি কেবল প্রথম উত্তরটির দিকে আবার তাকালাম এবং উত্পাদিত মার্কআপটি ওপির ব্যবহারের ক্ষেত্রে ঠিক সঠিক, যদিও এটি আমার প্রয়োজনীয়তা পূরণ করে না। ওপি চায় একটি ডিভাইডার liআইটেম তৈরি হচ্ছে যা liআপনি নিজের জেসবিনে দেখছেন অতিরিক্ত ।

— আসাদ সাইদুদ্দীন

Answer 3

এনজিরিপিট পর্যাপ্ত পরিমাণে নাও হতে পারে তবে আপনি এটি একটি কাস্টম নির্দেশের সাথে সংযুক্ত করতে পারেন। আপনি যদি কিছুটা 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 উপাদানটির টেম্পলেটটিতে নির্দেশ করে:

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

এটি চারপাশে কোনও ধারক না রেখে বিভিন্ন সংখ্যক টেম্পলেটগুলির পুনরাবৃত্তি করবে

দ্রষ্টব্য: হুম আমি রেন্ডারিংয়ের সময় এই অন্ধ উপাদানটিকে অন্ধ করে দিয়ে অন্ধ হয়ে শপথ করতে পারতাম, তবে এটি আবার পরীক্ষা করে দেখা যায় না ... এখনও আমার লেআউটের সমস্যাগুলি সমাধান করা গেলেও ... কারিওসার এবং কারিওসার ...

Comments

replace২.০ থেকে অবহেলিত।

— 3:44

আমি উপরেরটি চেষ্টা করেছিলাম, তবে টেমপ্লেট: "" এর কারণ যা কিছুই পরিবর্তিত হয়নি। আমি jsfiddle.net/markcoleman/fMP9s/1 থেকে লিঙ্কারটি ব্যবহার করে এটিকে সংশোধন করেছি: লিঙ্ক: ফাংশন (স্কোপ, উপাদান, অনুগ্রহকারী) {উপাদান [0] .উটার এইচটিএমএল = ''; ile সংকলন (এলিমেন্ট.কমেন্টস ()) (স্কোপ); }

— লরি লুবি

Answer 5

এখানে একটি মন্তব্যের নির্দেশমূলক বিধিনিষেধ রয়েছে, তবে এনজিরাপিট এটি সমর্থন করে না (যেহেতু এটির পুনরাবৃত্তি করার জন্য একটি উপাদান প্রয়োজন)।

আমি মনে করি যে আমি কৌণিক দলটি দেখেছি তারা বলেছিল এনজি-পুনরাবৃত্তি মন্তব্যে কাজ করবে, তবে আমি নিশ্চিত নই। রেপোতে আপনার এটির জন্য একটি সমস্যা খোলা উচিত। http://github.com/angular/angular.js

Comments

২০১২ সালের মন্তব্য। এখনও কি এমনটি আছে? তাদের ডকুমেন্টেশনগুলি অনুসন্ধান করার চেষ্টা করেছিল এবং কোনও রেফারেন্স খুঁজে পেল না।

— জ্যাক এস

Answer 6

এটি করার কোনও কৌণিক যাদু উপায় নেই, আপনার ক্ষেত্রে আপনি যদি এটি বুটস্ট্র্যাপ ব্যবহার করে থাকেন তবে বৈধ এইচটিএমএল পেতে এটি করতে পারেন। তারপরে আপনি 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

একটি সমাধান যা সত্যই কাজ করে 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-->

Comments

এটা মজার. যাইহোক, আমার পরীক্ষার replaceWith(...)ফলাফলগুলিতে কোনও পাঠ্য নোডে কোনও মন্তব্য নয়। আমি স্রেফ element.remove()কাজ ব্যবহার করে খুঁজে পেয়েছি ।

— আর্টফুলবোট