動態添加一個類到表中的特定行

-1

我有一個名爲「anotherWay」的指令，它監聽某個事件，然後嘗試動態地將一個類添加到表格行。動態添加一個類到表中的特定行

這可以在文件customTable.js可以看到在這個plnkr http://plnkr.co/edit/He11jnAYbDVShJEzHis8

然而，當我使用的語句，它不能附加類。

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級的東西。 –

雖然ng-class是Angular的方式，但它會添加多個不必要的觀察者。我也在解釋爲什麼他的嘗試失敗了。 – tasseKATT

好點，但突出顯示的行很可能最終會在某個時候改變。我相信在它提到的文檔中，Angular可以在成爲性能問題之前處理約1000名左右的觀察者，這可能是人類在單一視圖上處理的太多數據。 –

嘗試使用納克級：

<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只要你願意，並添加ng-class屬性到<tr />元素。

實施例：

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

Plunker

來源

2014-05-20 20:09:39

動態添加一個類到表中的特定行

回答

相關問題