Tenho uma DIV com um estilo aplicado via ng-style (pois alguns valores são calculados no controller).
<div ng-repeat="i in getNumber(tiles) track by $index"
ng-click="toggle = !toggle" // => esta linha não funciona
ng-style="tileStyle"></div>
Preciso efetuar um toggle no ng-click, alterando o valor do ng-style para outro estilo definido também no controller.
Meu controller:
angular.module('warmup').controller('BoardController', function($scope) {
$scope.tiles = 144;
$scope.getNumber = function(num) {
return new Array(num);
}
var boardHeight = window.innerHeight/3;
var boardWidth = boardHeight;
var tileHeight = boardHeight/12 - .3;
var tileWidth = tileHeight;
$scope.boardStyle = {
"height" : boardHeight + 'px',
"width" : boardWidth + 'px',
"border" : "1px solid #AAA"
}
var colors = [
{name: "principal", color: "red"},
{name: "locker", color: "blue"},
{name: "path", color: "green"}
];
$scope.tileStyle = {
"height" : tileHeight + 'px',
"width" : tileWidth + 'px',
"border" : "1px solid #CCC",
"background-color": colors[0].color,
"float": "left"
}
$scope.lockStyle = {
"height" : tileHeight + 'px',
"width" : tileWidth + 'px',
"border" : "1px solid #CCC",
"background-color": colors[1].color,
"float": "left"
}
//esta é a função que tentei escrever, sem sucesso
$scope.toggle = function() {
tileStyle = !lockStyle;
}
});
Encontrei vários exemplos usando ng-class. Mas não posso usar variáveis no css, e o projeto não permite usar SASS ou LESS.