使用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更改單元格的背景顏色

回答

相關問題