এনজি-রিপিট দিয়ে কোনও ফাংশন দিয়ে ফেরত আইটেমগুলির মাধ্যমে কীভাবে লুপ করবেন?


114

আমি বারবার ডিভগুলি তৈরি করতে চাই, আইটেমগুলি কোনও ফাংশন দ্বারা প্রত্যাবর্তিত বস্তু objects তবে নিম্নলিখিত কোড রিপোর্টের ত্রুটি: 10 $ ডাইজেস্ট () পুনরাবৃত্তি পৌঁছেছে। গর্ভপাত! জেএসফিডেল এখানে: http://jsfiddle.net/BraveOstrich/awnqm/

<body ng-app>
  <div ng-repeat="entity in getEntities()">
    Hello {{entity.id}}!
  </div>
</body>

উত্তর:


195

সংক্ষিপ্ত উত্তর : আপনার কি সত্যিই এই জাতীয় ফাংশন প্রয়োজন বা আপনি সম্পত্তি ব্যবহার করতে পারেন? http://jsfiddle.net/awnqm/1/

দীর্ঘ উত্তর

সরলতার জন্য আমি কেবল আপনার ক্ষেত্রে বর্ণনা করব - এনজি অবজেক্টের অ্যারে জন্য। এছাড়াও, আমি কিছু বিবরণ বাদ দেব।

অ্যাঙ্গুলারজেএস পরিবর্তনগুলি সনাক্ত করার জন্য নোংরা চেকিং ব্যবহার করে। যখন আবেদন শুরু হয় এটা রান $digestজন্য $rootScopeস্কোপের শ্রেণিবিন্যাসের$digest জন্য গভীরতার প্রথম ট্রভারসাল করবে । সমস্ত স্কোপের ঘড়ির তালিকা রয়েছে। প্রতিটি ঘড়ির শেষ মান হয় (শুরুতে )। সমস্ত ঘড়ির জন্য প্রতিটি স্কোপ এটি চালায়, বর্তমান মান ( ) পায় এবং এটির সাথে তুলনা করে । যদি বর্তমান মান সমান হয় না (সর্বদা প্রথম তুলনার জন্য) সেট করে । সমস্ত স্কোপগুলি প্রক্রিয়া করা হয় যদি থেকে অন্য গভীরতার-প্রথম ট্র্যাভারসাল শুরু হয় । নোংরা == মিথ্যা বা ট্র্যাভারসেলের সংখ্যা == 10 শেষ হয় যখন "10 $ ডাইজেস্ট () পুনরাবৃত্তির ত্রুটি পৌঁছেছে" " লগ করা হবেinitWatchVal$digestwatch.get(scope)watch.lastwatch.last$digestdirtytruedirty == true $digest$rootScope$digest

এখন সম্পর্কে ngRepeat। প্রতিটি watch.getকলের জন্য এটি getEntitiesক্যাশে ( HashQueueMapবাই দ্বারা hashKey) অতিরিক্ত তথ্য সহ সংগ্রহের (ফেরতের মান ) থেকে বস্তুগুলি সঞ্চয় করে । প্রতিটি watch.getকলের ngRepeatজন্য hashKeyক্যাশে থেকে এর মাধ্যমে বস্তু পাওয়ার চেষ্টা করে । যদি এটি ক্যাশে বিদ্যমান না থাকে, ngRepeatএটি ক্যাশে সংরক্ষণ করে, নতুন সুযোগ তৈরি করে, এটিতে বস্তু রাখে, ডোম উপাদান তৈরি করবে ইত্যাদি

এখন সম্পর্কে hashKey। সাধারণত hashKeyঅনন্য সংখ্যা দ্বারা উত্পাদিত nextUid()। তবে এটি ফাংশন হতে পারেhashKeyভবিষ্যতে ব্যবহারের জন্য উত্পাদনের পরে অবজেক্টে সংরক্ষণ করা হয়।

আপনার উদাহরণ কেন ত্রুটি উত্পন্ন করে : ফাংশন getEntities()সর্বদা নতুন বস্তুর সাথে অ্যারে প্রদান করে। এই বস্তুর ক্যাশে hashKeyনেই এবং নেই doesn't ngRepeatসুতরাং ngRepeatপ্রতিটি watch.getজন্য নতুন ঘড়ির জন্য এটির জন্য নতুন সুযোগ তৈরি করে {{entity.id}}। প্রথম এই ঘড়ি watch.getআছে watch.last == initWatchVal। তাই watch.get() != watch.last। সুতরাং $digestনতুন পারাপার শুরু হয়। তাই ngRepeatনতুন ঘড়ির সাথে নতুন সুযোগ তৈরি করে। সুতরাং ... 10 টি ট্র্যাভার্সের পরে আপনি ত্রুটি পান।

কীভাবে আপনি এটি ঠিক করতে পারেন

  1. প্রতিটি getEntities()কলে নতুন জিনিস তৈরি করবেন না ।
  2. আপনার যদি নতুন অবজেক্ট তৈরি করার প্রয়োজন হয় তবে আপনি hashKeyসেগুলির জন্য পদ্ধতি যুক্ত করতে পারেন । উদাহরণস্বরূপ এই বিষয়টি দেখুন ।

আশা করি যে লোকেরা AngularJS ইন্টার্নালগুলি জানে তারা যদি আমি কোনও বিষয়ে ভুল হয়ে থাকি তবে তারা আমাকে সংশোধন করবে।


4
+1 এর জন্য আপনাকে ধন্যবাদ। আমার একই সমস্যা ছিল এবং এটির জন্য কোনও স্থির সম্পত্তি ব্যবহার করতে পারি না। h হ্যাশকি ম্যানুয়াল আইএমওর এনজিপিপি পেজে সত্যই নথিভুক্ত করা উচিত।
মাইকেল মউসা

এর কোন প্রভাব 1.1.3 থেকে 1.1.4 এ পরিবর্তিত হয়েছে যা এটি প্রভাবিত করেছে? 1.1.4 এর আগে এটি আসলে কাজ করেছিল। এটি সম্পর্কে চেঞ্জলগে কিছুই নেই এবং পার্থক্য কী তা আমি কারণ বলতে পারি না। বর্তমানের আচরণটি বোধগম্য হয়।
m59

এছাড়াও, আপনি এটি করতে পারেন কিনা তা পরীক্ষা করে দেখুন: stackoverflow.com/questions/20933261/… আমার উত্তরটি যাওয়ার উপায় কিনা আমি নিশ্চিত নই ..
এম 59

2
সুতরাং Do not create new objects on every getEntities() call.এটির প্রস্তাবনাটি অনুসরণ করা খুব সহজেই এর মতো ঠিক করা যায়:<div ng-repeat="entity in entities = (entities || getEntities())">
przno

2
আমার পূর্ববর্তী মন্তব্যটি থেকে সমাধানটি getEntities()সর্বদা একই অ্যারেটি ফেরত দেওয়ার ক্ষেত্রে কাজ করে , যদি অ্যারে কখনও পরিবর্তন হয় তবে আপনি এটিকে পাবেন নাng-repeat
przno

44

পুনরাবৃত্তের বাইরে অ্যারের শুরু করুন

<body ng-app>
   <div ng-init="entities = getEntities()">
       <div ng-repeat="entity in entities">
           Hello {{entity.id}}!
       </div>
   </div>
</body>

8
getEntities()প্রোগ্রামটির জীবনরক্ষায় যদি কিছু আলাদা ফিরে আসে তবে এটি কাজ করে না । উদাহরণস্বরূপ বলুন, এটি getEntities()একটি ট্রিগার $http.get। যখন শেষ অবধি সমাধান করুন (আপনি AJAX কল করেছেন), entitiesইতিমধ্যে শুরু করা হবে।
নাইটো

3
কৌনিক দস্তাবেজগুলি থেকেThe only appropriate use of ngInit is for aliasing special properties of ngRepeat. Besides this case, you should use controllers rather than ngInit to initialize values on a scope.
ব্লুসি

আমি মনে করি যে মূল বক্তব্যটি "পুনরাবৃত্তির বাইরে অ্যারের সূচনা করা" যে কোনও উপায়েই করা উচিত ... এবং @
নাইটো

15

এটি এখানে জানানো হয়েছিল এবং এই প্রতিক্রিয়া পেয়েছে:

আপনার প্রাপ্ত ব্যক্তি আদর্শবান নয় এবং মডেলটিকে পরিবর্তন করে (প্রতিবার যখন এটি বলা হয় তখন নতুন অ্যারে তৈরি করে)। এটি কৌনিকটি এটিকে কল করতে বাধ্য করছে যে এই মডেলটি শেষ পর্যন্ত স্থিতিশীল হয়ে উঠবে, তবে এটি কৌনিকটি কখনও ছাড় দেয় না এবং ব্যতিক্রম ছুঁড়ে ফেলে।

প্রাপ্তিকারীর মানগুলি সমান তবে অভিন্ন নয় এবং এটিই সমস্যা।

আপনি যদি প্রধান কন্ট্রোলারের বাইরে অ্যারেটি সরান তবে আপনি এই আচরণটি দূরে যেতে দেখতে পাবেন:

var array = [{id:'angularjs'}];
function Main($scope) {
    $scope.getEntities = function(){return array;};
};

কারণ এখন এটি প্রতিবার একই জিনিস ফিরে আসবে। কোনও ফাংশনের পরিবর্তে সুযোগে কোনও সম্পত্তি ব্যবহার করার জন্য আপনার মডেলটিকে পুনরায় আর্কিটেক্ট করার দরকার হতে পারে:

আমরা কোনও সম্পত্তিটিতে নিয়ামকের পদ্ধতির ফলাফল নির্ধারণ করে এবং এনজিও করে এর চারপাশে কাজ করেছি: এর বিরুদ্ধে পুনরাবৃত্তি করুন।


কোনও ক্রিয়াকলাপের প্রতিটি পুনরাবৃত্তির সাথে পরামিতি পরিবর্তিত হলে সম্পত্তি ব্যবহার করা একমাত্র উপায় be
স্টিফেন 17

7

@ প্রোজনো মন্তব্যের ভিত্তিতে

<body ng-app>
  <div ng-repeat="item in t = angular.equals(t, getEntities()) ? t : getEntities()">
    Hello {{item.id}}!
  </div>
</body>

বিটিডাব্লু দ্বিতীয় সমাধান @ আর্টেম অ্যান্ড্রিভ পরামর্শ দেয় যে কৌণিক 1.1.4 এবং এর চেয়ে বেশি ক্ষেত্রে কাজ করছে না, যখন প্রথমটি সমস্যাটি সমাধান করে না। সুতরাং, আমি এখনই ভয় পাচ্ছি এটি কার্যকারিতাতে অসুবিধা ছাড়াই কম চিকিত্সা সমাধান


আপনি আইটেম.আইডি মানে? সত্তা.আইডি যদি আপনি যা বোঝাতে চান, আপনি দয়া করে ব্যাখ্যা করতে পারেন? অনেক ধন্যবাদ!
গিফ্রিড

হ্যাঁ তুমি সঠিক. Item.idএটা কি খ উচিত। ধন্যবাদ
আগত
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.