ng-repeat의 마지막 요소의 다른 클래스

ng-repeat의 마지막 요소의 다른 클래스

이렇게 ng-repeat으로 리스트를 만들고 있습니다.

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

하지만 마지막 요소만 수업을 하고 싶습니다.<div class="last">test</div>)가 포함되어 있습니다.어떻게 하면 ng-module을 사용하여 이 작업을 수행할 수 있습니까?

사용할 수 있습니다.$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>

CSS를 사용하면 더 쉽고 깔끔합니다.

HTML:

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

CSS:

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

그:last-of-type실렉터는 현재 98%의 브라우저에서 지원되고 있습니다.

Paul의 답변을 자세히 설명하자면, 이것은 템플릿 코드와 일치하는 컨트롤러 로직입니다.

// 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;
};

또, 가능한 한 이 솔루션은 피하는 것이 좋습니다.기본적으로 CSS는 이를 처리할 수 있으며 JS 기반 솔루션을 만들 필요가 없으며 성능이 저하됩니다.아쉽게도 IE8 >를 지원해야 하는 경우에는 이 솔루션이 작동하지 않습니다(MDN 지원 문서 참조).

CSS만의 솔루션

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

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

난 괜찮아!행운을 빕니다.

사용할 수 있습니다.limitTo으로 여과하다.-1마지막 요소 찾기

예:

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

Fabian Perez의 답변은 나에게 효과가 있었고 약간의 변화를 주었다.

편집된 html은 다음과 같습니다.

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

언급URL : https://stackoverflow.com/questions/14581658/different-class-for-the-last-element-in-ng-repeat