동적으로 테이블의 특정 행에 클래스 추가

-1

나는 "anotherWay"라는 지시문을 사용하여 이벤트를 수신 한 다음 클래스를 테이블 행에 동적으로 추가하려고 시도합니다. 동적으로 테이블의 특정 행에 클래스 추가

이

내가 문을 사용할 때 http://plnkr.co/edit/He11jnAYbDVShJEzHis8

그러나,이 클래스를 연결하는 데 실패이 plnkr의 파일 customTable.js에서 볼 수 있습니다.

element[0].rows[index].addClass('highlight');

어떻게 해결할 수 있습니까?

출처

2014-05-20 runtimeZero

범위가 '('downMovement ')에 $된다'소성? –

g를 누른 다음 키보드에서 1을 누르십시오. – runtimeZero

아, app.js에서 보았습니다. 내 Plunker를 업데이트했습니다. –

addClass jqLite는 함수가 아니라 DOM 요소의 함수이다.

용액 1 - 바닐라 JS :

var row = element[0].rows[index]; 

if (row.classList) row.classList.add('highlight'); 
else row.className += ' ' + 'highlight';

해결책 2 - jqLite :.

var row = element[0].rows[index]; 

angular.element(row).addClass('highlight');

출처

2014-05-20 20:11:11 tasseKATT

이들이 작동하는 것처럼 보이지만, 이들 중 어느 것도 ng-class와 같은 것을 사용하는 것을 의미하는 "각도 방식"이 아닙니다. –

ng-class는 Angular 방식이지만 여러 불필요한 Watcher가 추가됩니다. 나는 또한 그의 시도가 실패하고있는 이유를 설명하고있다. – tasseKATT

좋은 지적이지만 강조 표시된 행이 결국 어느 시점에서 변경 될 가능성이 큽니다. 저는 Angular가 성능 문제가되기 전에 ~ 1000 명 정도의 관찰자를 처리 할 수 있다고 언급 한 문서도 믿습니다. 이는 사람이 단일보기에서 처리하기에는 너무 많은 데이터 일 것입니다. –

NG 수준 사용해보십시오 : 당신의 지시에 다음

<tr ng-class="{'highlighted': highlightedRows[$index] == true}" ng-repeat="element in body">

그리고를 대신 클릭의 요소를 가로 지르는 당신이 원하는 때마다

angular.module('CustomTable').directive('anotherWay',[function(){ 
    return { 
    link: function(scope,element,attrs,controller){ 
     scope.highlightedRows = {}; 
     scope.$on('downMovement',function(event,index){ 
     index = parseInt(index); 
     console.log("Row that should be highlighted is :" + index); 
     scope.highlightedRows[index] = true; 

     }); 

    } //end link 

    }; // end return 

}]);

출처

2014-05-20 20:09:27

, scope.rowSelected을 업데이트하고 추가 <tr /> 요소에 대한 ng-class 특성

예 :

<tr ng-repeat="element in body" ng-class="{ highlight: rowSelected == $index }">

Plunker

출처

2014-05-20 20:09:39

동적으로 테이블의 특정 행에 클래스 추가

답변

관련 문제