只使表格中突出顯示的單元格值

Question

我正在使用angularjs，並且在更新表格中的某個值時，我想將CSS類添加到特定的單元格中。

• 我該如何只添加高亮類也只有該單元格？而不是整行......使用角度指令

預期行爲：由於更新了Value2，因此只應突出顯示該單元格。

我plunker：http://plnkr.co/edit/mfglNOpluccUKLTlLdja?p=preview

我的表：

<table border="1" style="width: 320px;" class="table table-striped table-hover table-responsive table-bordered"> 
    <thead style="font-weight: bold;"> 
    <tr> 
     <th ng-repeat="column in columnsTest" ng-if="column.checked" ng-bind="column.id"></th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr ng-repeat="row in rows"> 

     <td ng-repeat="column in columnsTest" ng-if="column.checked"> 
     <span class="glyphicon glyphicon-circle-arrow-right" ng-show="column.id === 'Value1'"></span> 
     <span data-highlighter="row.Updated">{{row[column.id]}}</span> 
     </td> 
    </tr> 
    </tbody> 
</table> 

CSS：

.highlight { 
background-color: lightgreen; 
transition: background 200ms; 
} 

角指令：

app.directive('highlighter', ['$timeout', function ($timeout) { 
return { 
    restrict: 'A', 
    scope: { 
     model: '=highlighter' 
    }, 
    link: function (scope, element) { 
     scope.$watch('model', function(updated) { 
       if (updated) { 


       element.addClass('highlight'); 

       // auto remove after some delay 
       $timeout(function() { 
        element.removeClass('highlight'); 
       }, 1000); 
       } 
     }); 
    } 
}; 

Answer 1

這部分的問題是：

model: '=highlighter' 

因爲

<span data-highlighter="row.Updated"> 

這會給model的row.Updated的價值，那就是將對所有三列改變的值，因爲這是他們的父定義。

將其更改爲

<span data-highlighter="row[column.id]"> 

然後，它的工作原理。

---

編輯：刪除了我以前的答案。