[angularjs] ng-repeat의 마지막 요소에 대한 다른 클래스

Program / 글쓴이

ng-repeat를 사용하여 목록을 만들고 있습니다.

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

그러나 마지막 요소만으로 클래스 ( <div class="last">test</div>)를 포함하고 싶습니다 . ng-repeat를 사용하여 어떻게 이것을 달성 할 수 있습니까?

답변

지시문 $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>

답변