Question

我在我的应用程序中使用Angular。

 <td ng-click="selectTime(this)" >

我有一个包含大量单元格的表格，我想在选择单元格时更改单元格的背景颜色。我将当前元素（this）传递给我的函数selectTime。

$scope.selectTime = function (element) {

        $(element).addClass("active");

    }



.active {
            background-color:orangered;
        }

出于某种原因，即使我要添加课程，背景颜色也不会改变。

Answer 1

最好不要使用jQuery来操纵控制器功能中的DOM。

使用ng-class。

<td ng-click="selectTime($event)" ng-class="{'orange': event.selected, 'red': !event.selected }"> </td>

请记住将$event作为参数传递给ng-click指令。

你的控制器功能看起来像这样

$scope.selectTime = function (event) {
     $(event).selected = true;
}

信用应该归功于这个答案

Accessing clicked element in angularjs

Answer 2

直接的vanilla JS方法，虽然Richard Hamilton的答案在以Angular方式处理这个方面要好得多：

<td ng-click="select($event)"></td>

和JS：

$scope.select = function(event) {
    var elements = document.getElementsByClassName('active');
    for(var i = 0; i < elements.length; i++) {
      elements[i].classList.remove('active');//clear old active cells
    }
    event.currentTarget.classList.add("active");
}

Answer 3

我为此做了一个垃圾箱。

＆＃13;

(function() {
    'use strict';

    angular
        .module('app',[])
        .controller('tableController', tableController);

    function tableController() { 
			
      var vm = this;
			
      vm.items = [1,2,3,4,5,6];    
      
      vm.changebgColor = changebgColor;

      function changebgColor(item){
    
				vm.selectedIndex = item;
      
    }
			
		}
  
})();

＆＃13;

table tr td{
  border:1px solid #ccc;
  width:100px;
  text-align:center;
}

.red{
	background-color:red;
}

.blue{
	background-color:blue;
}

＆＃13;

<!DOCTYPE html>
<html data-ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body data-ng-controller="tableController as vm">
  
  <table>
    <tr data-ng-repeat="item in vm.items">
      <td 
					data-ng-class="{ 'red': $index == vm.selectedIndex }"
					data-ng-click="vm.changebgColor($index)">{{item}}
			</td>
    </tr>    
  </table>

</body>
</html>

＆＃13;

希望这会对你有所帮助。

使用Angular更改单元格的背景颜色

3 个答案: