1

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.

2
  • Se tem vários tiles para isso correto
    – novic
    Commented 2/10/2017 às 16:19
  • Sim, são vários tiles. E a mudança de cor precisa ocorrer em cada um individualmente.
    – Atoyansk
    Commented 2/10/2017 às 16:44

1 Resposta 1

1

O seu código falta muita coisa para fazer uma resposta ideal, mas, vou fazer um exemplo minimo, onde isso vai funcionar para um elemento assim quando clicar no quadrado, vai mudar o estilo conforme configurado no tileStyle e lockStyle:

var app = angular.module("app", []);
app.controller("ctrl", function($scope) {

  //configurações
  $scope.tileHeight = 100;
  $scope.tileWidth = 100;

  //array de cores
  $scope.colors = [{
      color: 'blue'
    },
    {
      color: 'black'
    },
  ];

  //estilo do Tyle
  $scope.tileStyle = {
    "height": $scope.tileHeight + 'px',
    "width": $scope.tileWidth + 'px',
    "border": "1px solid #CCC",
    "background-color": $scope.colors[0].color,
    "float": "left", 
    "cursor": "pointer"
  }
  //estilo do Tyle
  $scope.lockStyle = {
    "height": $scope.tileHeight + 'px',
    "width": $scope.tileWidth + 'px',
    "border": "1px solid #CCC",
    "background-color": $scope.colors[1].color,
    "float": "left", 
    "cursor": "pointer"
  }
  //Status do toggle
  $scope.toggle = false;
  //função que muda o Status do toogle
  $scope.setToogle = function()
  {
    $scope.toggle = !$scope.toggle;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
<div ng-click="setToogle()" ng-style="(toggle)?tileStyle:lockStyle"></div>
</div>

Ou seja, ao clicar no elemento, vai mudar o estilo configurado no seu código.


Agora conforme a sua edição que colocou todo o controller, deve ser criado uma variável para conter todos os status, e isso pode ser feito em tempo de execução atribuindo true para todas, a partir dela trocar o valor e também o estilo, exemplo:

angular.module('warmup', [])
  .controller('BoardController', function($scope) {

    $scope.tiles = 144;
    
    $scope.status = [];
    
    $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"
    }
    
    $scope.changeToogle = function($index) {
      $scope.status[$index] = !$scope.status[$index];
    }
    
    $scope.initToogle = function($index) {
      $scope.status[$index] = true;
    }
    
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="warmup" ng-controller="BoardController">
  <div ng-repeat="i in getNumber(tiles) track by $index" ng-click="changeToogle($index)" ng-init="initToogle($index)" ng-model="status[$index]" ng-style="status[$index]?tileStyle:lockStyle">
  </div>
</div>

3
  • O que tem no código está lá (editei o código do Controller agora). Sua ajuda foi quase! Ao clicar em um tile (são 144), todos mudam de cor.
    – Atoyansk
    Commented 2/10/2017 às 16:44
  • @Atoyansk fiz o segundo exemplo conforme o seu, observe bem que tem algumas alterações ...
    – novic
    Commented 2/10/2017 às 17:00
  • Perfeito, funcionou! Obrigado
    – Atoyansk
    Commented 2/10/2017 às 17:05

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .