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

我在我的应用程序中使用Angular。使用Angular更改单元格的背景颜色

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

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

$scope.selectTime = function (element) { 

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

    } 



.active { 
      background-color:orangered; 
     }

由于某些原因，即使我添加了一个类，背景颜色也没有改变。

来源

2016-03-01 JohnDoe

Orantered没有颜色会变红或橙色 –

这不是问题！即使我把红色或橙色，它不会在表单元格上设置任何颜色。 – JohnDoe

这个元素对jquery有效吗？ –

最好不要使用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

来源

2016-03-01 22:48:13

但是，这将设置表中所有TD元素的类和颜色。我只想设置点击的元素。 – JohnDoe

你必须用'$ index'参数指定位置，假设你的td在ng-repeat循环中 –

我不认为我可以使用$ index，因为我没有使用angular来循环我的元素。我正在使用ASP.NET MVC服务器端代码。 – JohnDoe

直白香草JS的办法，虽然理查德 - 汉密尔顿的回答是在操控性方面要好得多这在一个角度的方式：

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

来源

2016-03-01 22:56:11 SethWhite

我为此做了一个bin。

(function() { 
 
    'use strict'; 
 

 
    angular 
 
     .module('app',[]) 
 
     .controller('tableController', tableController); 
 

 
    function tableController() { 
 
\t \t \t 
 
     var vm = this; 
 
\t \t \t 
 
     vm.items = [1,2,3,4,5,6];  
 
     
 
     vm.changebgColor = changebgColor; 
 

 
     function changebgColor(item){ 
 
    
 
\t \t \t \t vm.selectedIndex = item; 
 
     
 
    } 
 
\t \t \t 
 
\t \t } 
 
    
 
})();

table tr td{ 
 
    border:1px solid #ccc; 
 
    width:100px; 
 
    text-align:center; 
 
} 
 

 
.red{ 
 
\t background-color:red; 
 
} 
 

 
.blue{ 
 
\t background-color:blue; 
 
}

<!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 
 
\t \t \t \t \t data-ng-class="{ 'red': $index == vm.selectedIndex }" 
 
\t \t \t \t \t data-ng-click="vm.changebgColor($index)">{{item}} 
 
\t \t \t </td> 
 
    </tr>  
 
    </table> 
 

 
</body> 
 
</html>

希望这可以帮助你。

来源

2016-03-02 10:35:26 Vasu

尽管这个链接可能回答这个问题，但最好在这里包含答案的基本部分，并提供供参考的链接。如果链接页面更改，则仅链接答案可能会失效。 - [来自评论]（/ review/low-quality-posts/16739707） – litelite

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

回答

相关问题