एनजी-रिपीट में अंतिम तत्व के लिए अलग वर्ग

152

मैं कुछ इस तरह एनजी-रिपीट का उपयोग करके एक सूची बना रहा हूं

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

लेकिन अकेले अंतिम तत्व के लिए मैं इसमें एक वर्ग ( <div class="last">test</div>) शामिल करना चाहूंगा । मैं एनजी-रिपीट का उपयोग करके इसे कैसे प्राप्त कर सकता हूं?

angularjs

— राहुल
स्रोत

पिछले 2 घंटे से उसी पर अटका था :)

— अंशुल

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

हां .. मुझे Google समूहों से एक और जवाब भी मिला <div ng-repeat="file in files" ng-class="{last: $last}"> {{file.name}} </div>

— राहुल

1

@ राहुल, मुझे लगता है, आपका जवाब मेरी तुलना में बेहतर है।

— पॉल ब्रिट

@ राहुल, वास्तव में दुख की बात है, यह मेरे लिए काम करता है। डेवलपर कंसोल में आपके पास क्या है?

— पॉल ब्रिट

23

यह सीएसएस के साथ करना आसान और साफ है।

HTML:

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

सीएसएस:

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

:last-of-typeचयनकर्ता वर्तमान ब्राउज़रों के 98% के द्वारा समर्थित है

— एडन
स्रोत

3

CSS के तरीके में AngularJS के लिए समाधान

— Mo.

1

NB: यह तब काम नहीं करता है जब ng-repeatइसके बाद होता है <div class="file"></div>, और आप मौजूदा .file divs की सूची को अलग करना चाहते हैं ।

— डेरामिक

1

@DerMike में मामला आप पर अन्य वर्ग डाल चाहते हैं कि 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 का समर्थन करने की आवश्यकता है> तो यह समाधान आपके लिए काम नहीं करेगा ( एमडीएन समर्थन डॉक्स देखें )।

सीएसएस-ओनली सॉल्यूशन

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

— स्कॉट तलवार
स्रोत

नोट: CSS-only समाधान तब काम नहीं करता है यदि .ng-hide class को अंतिम तत्व के रूप में लागू किया जाता है: अंतिम-बच्चा स्वयं इस बात से चिंतित नहीं होता है कि तत्व स्क्रीन पर प्रदान किया गया है या नहीं, लेकिन क्या यह शाब्दिक रूप से अंतिम है मार्कअप में सेट के भीतर तत्व। 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

फैबियन पेरेज़ द्वारा दिए गए जवाब ने मेरे लिए, थोड़ा बदलाव के साथ काम किया

संपादित html यहाँ है:

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

— टी। नाइक
स्रोत