Javascript 更改表angularjs中单个单元格（td）的css_Javascript_Css_Angularjs

Javascript 更改表angularjs中单个单元格（td）的css

javascript css angularjs

Javascript 更改表angularjs中单个单元格（td）的css,javascript,css,angularjs,Javascript,Css,Angularjs,问题：使用AngularJS，我需要更改用户单击的单个单元格（td）的颜色（或者我们可以说CSS）现在，为了简化用例，我们只想更改所有表单元格的颜色，其中我们有零下面是我尝试过的代码，但它改变了表中所有单元格的颜色 <body ng-controller="MainCtrl"> <table> <tbody> <tr ng-repeat="row in tableType.data.rows track by $i

问题：使用AngularJS，我需要更改用户单击的单个单元格（td）的颜色（或者我们可以说CSS）

现在，为了简化用例，我们只想更改所有表单元格的颜色，其中我们有零

下面是我尝试过的代码，但它改变了表中所有单元格的颜色

<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>

CSS

.red{
    color:red;
}

.blue{
    color:blue;
}

.yellow{
    color:yellow;
}

问题是您正在将所有单元格绑定到作用域的

cellColor

变量的值。如果您想做您正试图做的事情，那么一个解决方案是创建一个指令，应用于每个单元，该单元有自己的

cellColor

变量，该变量在调用回调时覆盖从父范围继承的变量。

下面是另一个直接处理DOM的指令解决方案

HTML

工作样本

感谢您的回复。你能在这里提供一个例子吗？如果你设置了一个JSFIDLE并且代码正常工作，我会修改它。

.red{
    color:red;
}

.blue{
    color:blue;
}

.yellow{
    color:yellow;
}

<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');
         }   
      })
    }
  }