改變CSS angularjs

問題：使用AngularJS，我需要改變哪個用戶點擊了一個單細胞（TD）的顏色（或者我們可以說CSS）。改變CSS angularjs

現在簡化使用的情況下，只需要換，我們有零

所有表格單元格的顏色下面是我所試過的代碼，但它改變表中的所有單元格的顏色。

<body ng-controller="MainCtrl"> 
    <table> 
     <tbody> 
     <tr ng-repeat="row in tableType.data.rows track by $index"> 
      <td ng-repeat="col in row track by $index" > 
      <span id={{col}} ng-class='cellColor' ng-click='updateCellColor(col)'>{{col}}</span> 
      </td> 
     </tr> 
     </tbody> 
    </table> 
    </body>

位指示

app.controller('MainCtrl', function($scope) { 
    $scope.tableType = { 
    data: { 
     rows: [ 
     ["69123", 20, 20, 40, 0, 0, 0, 0, 20, 20, 20, 0, 20, 20, 0, 20], 
     ["69121", 20, 20, 40, 0, 0, 0, 20, 20, 40, 20, 0, 20, 20, 0, 20], 
     ["69124", 20, 20, 40, 0, 0, 0, 0, 0, 0, 20, 0, 20, 0, 0, 0], 
     ["69221", 20, 20, 40, 20, 0, 20, 0, 0, 0, 20, 0, 20, 20, 20, 40] 
     ] 
    } 
    }; 

    $scope.cellColor = "blue"; 

    $scope.updateCellColor = function(col){ 
    if(parseInt(col)===parseInt(0)){ 
     alert('changing color to red'); 
     $scope.cellColor = "red"; 
    }else{ 
     alert('changing color to yellow'); 
     $scope.cellColor = "yellow"; 
    } 
    }; 

});

CSS

.red{ 
    color:red; 
} 

.blue{ 
    color:blue; 
} 

.yellow{ 
    color:yellow; 
}

來源

2015-01-03 VikramK

的問題是，你所有的細胞結合範圍的cellColor變量的值。如果你想做你想做的事情，那麼一種解決方案就是創建一個指令，應用於每個單元格有自己的cellColor變量，該變量在調用回調時覆蓋從父範圍繼承的變量。

來源

2015-01-03 14:56:05 unobf

感謝響應。你可以在這裏提供例子unobf – VikramK

如果你設置了一個jsfiddle，你的代碼工作，我會修改它。 – unobf

這是另一個帶有指令的解決方案，它直接處理DOM。

HTML

<body ng-app="app"> 
    <div ng-controller="MainCtrl"> 
    <table> 
     <tbody> 
     <tr ng-repeat="row in tableType.data.rows track by $index"> 
      <td ng-repeat="col in row track by $index" > 
      <span id={{col}} highlight-on-click>{{col}}</span> 
      </td> 
     </tr> 
     </tbody> 
    </table> 
    </div> 
</body>

指令

app.directive('highlightOnClick', function(){ 
    return { 
    restrict: 'A', 
    link: function($scope, element){ 
     element.bind('click', function(){ 
     if(parseInt(element.text()) === 0){ 
      element.toggleClass('red'); 
     } else { 
      element.toggleClass('yellow'); 
     } 
     }) 
    } 
    }

工作樣品here

來源

2015-01-03 16:11:23 Karthik

改變CSS angularjs

回答

相關問題