এনজি-রিপিটে শেষ উপাদানটির জন্য পৃথক শ্রেণি

152

আমি এনজি-রিপিট এর মতো কিছু ব্যবহার করে একটি তালিকা তৈরি করছি

  <div ng-repeat="file in files">
   {{file.name}}
   </div>

তবে একমাত্র শেষ উপাদানটির জন্য আমি <div class="last">test</div>এটিতে একটি শ্রেণি ( ) অন্তর্ভুক্ত করতে চাই। এনজি-রিপিট ব্যবহার করে আমি কীভাবে এটি অর্জন করতে পারি?

angularjs

— রাহুল
সূত্র

গত ২ ঘন্টা থেকে একইভাবে আটকে ছিল :)

— আনশুল

241

আপনি নির্দেশের $lastমধ্যে পরিবর্তনশীল ব্যবহার করতে পারেন ng-repeat। ডক একবার দেখুন ।

আপনি এটি এর মতো করতে পারেন:

 <div ng-repeat="file in files" ng-class="computeCssClass($last)">
 {{file.name}}
 </div>

যেখানে computeCssClassফাংশনটি controllerএকমাত্র যুক্তি এবং রিটার্ন নেয় 'last'বা null।

অথবা

  <div ng-repeat="file in files" ng-class="{'last':$last}">
  {{file.name}}
  </div>

— পল ব্রিট
সূত্র

1

আমি এর আগে একবার দেখেছিলাম কিন্তু ঠিক কীভাবে শেষ - কীভাবে ব্যবহার করতে পারি তা বুঝতে পারছিলাম না .. এর বাইরে খুব বেশি উদাহরণ নেই।

— রাহুল

@ রাহুল, আমি উত্তর আপডেট করেছি। আমি কি বলছি বুঝতে পারছেন?

— পল ব্রিট

8

হ্যাঁ .. গুগল গ্রুপগুলি থেকে আমি আরও একটি উত্তর পেয়েছি <div ng-repeat="file in files" ng-class="{last: $last}"> {{file.name}} </div>

— রাহুল

1

@ রাহুল, আমার ধারণা, আপনার উত্তর আমার চেয়ে ভাল।

— পল ব্রিট

@ রাহুল, সত্যিই দুঃখের বিষয়, এটি আমার পক্ষে কাজ করে। বিকাশকারী কনসোলে আপনার কী আছে?

— পল ব্রিট

23

এটি CSS এর মাধ্যমে করা সহজ এবং ক্লিনার।

এইচটিএমএল:

<div ng-repeat="file in files" class="file">
  {{ file.name }}
</div>

সিএসএস:

.file:last-of-type {
    color: #800;
}

:last-of-typeনির্বাচক বর্তমানে ব্রাউজার 98% দ্বারা সমর্থিত

— Aidan
সূত্র

3

সিএসএস উপায়ে AngularJS এর সমাধান 👌

— মো।

1

বিশেষ দ্রষ্টব্য: এই কাজটি যখন না ng-repeatদ্বারা অনুসরণ করা হয় <div class="file"></div>, এবং আপনি যদি বিদ্যমান একটি তালিকা সরাইয়া সেট চাই .file আছে divs।

— ডেরমাইক

1

@ ডেরমাইক সেই ক্ষেত্রে আপনি ng-repeatউপাদানগুলিকে পিছন থেকে আলাদা করতে অন্য শ্রেণি স্থাপন করেছেনdiv

— এডান

14

পলের উত্তরটি বিশদভাবে জানাতে, এটি নিয়ামক যুক্তি যা টেম্পলেট কোডের সাথে মিলে যায়।

// HTML
<div class="row" ng-repeat="thing in things">
  <div class="well" ng-class="isLast($last)">
      <p>Data-driven {{thing.name}}</p>
  </div>
</div>

// CSS
.last { /* Desired Styles */}

// Controller
$scope.isLast = function(check) {
    var cssClass = check ? 'last' : null;
    return cssClass;
};

এটিও লক্ষণীয় যে আপনি যদি সম্ভব হয় তবে এই সমাধানটি সত্যই এড়ানো উচিত। প্রকৃতির দ্বারা সিএসএস এটি পরিচালনা করতে পারে, জেএস-ভিত্তিক সমাধান তৈরি করা অপ্রয়োজনীয় এবং অ-অভিনয় নয়। দুর্ভাগ্যক্রমে আপনার যদি IE8 সমর্থন করতে হয়> এই সমাধানটি আপনার পক্ষে কাজ করবে না ( MDN সমর্থন ডক্স দেখুন )।

সিএসএস-কেবলমাত্র সমাধান

// Using the above example syntax
.row:last-of-type { /* Desired Style */ }

— স্কট তরোয়াল
সূত্র

দ্রষ্টব্য: সিএসএস-কেবলমাত্র সমাধানটি শেষ উপাদানের উপর .ng-hide শ্রেণি প্রয়োগ করা হলে কাজ করে না: উপাদানটি পর্দায় রেন্ডার করা হয়েছে কিনা তা শেষ সন্তানের নিজেরাই উদ্বেগ প্রকাশ করে না, তবে এটি আক্ষরিক অর্থেই শেষ কিনা মার্কআপ মধ্যে সেট মধ্যে উপাদান। fiddle.jshell.net/p5qe82w4/4

— কেরি জনসন

7

<div ng-repeat="file in files" ng-class="!$last ? 'class-for-last' : 'other'">
   {{file.name}}
</div>

সেটা আমার জন্য কাজ করে! শুভকামনা!

— ফ্যাবিয়ান পেরেজ
সূত্র

সুতরাং যদি এটি শেষ হয় না, তবে এটি শেষের জন্য ক্লাসে থাকে এবং শেষ উপাদানটির অন্যান্য শ্রেণি থাকে ...

— strwoc

2

আপনি শেষ উপাদানটি খুঁজে পেতে limitToফিল্টারটি ব্যবহার করতে পারেন-1

উদাহরণ :

<div ng-repeat="friend in friends | limitTo: -1">
    {{friend.name}}
</div>

— Nourein
সূত্র

0

ফ্যাবিয়ান পেরেজের দেওয়া উত্তরটি আমার জন্য সামান্য পরিবর্তন নিয়ে কাজ করেছিল

সম্পাদিত এইচটিএমএল এখানে:

<div ng-repeat="file in files" ng-class="!$last ? 'other' : 'class-for-last'"> {{file.name}} </div>

— টি। নায়েক
সূত্র