I have a DIV with a style applied via ng-style (since some values are computed in the controller).
<div ng-repeat="i in getNumber(tiles) track by $index"
ng-click="toggle = !toggle" // => esta linha não funciona
ng-style="tileStyle"></div>
I need to toggle in ng-click, changing the value of ng-style to another style also defined in the controller.
My 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;
}
});
I found several examples using ng-class. But I can not use variables in the css, and the project does not allow using SASS or LESS.