Toggle using different ng-Style - Angularjs

Question

I have a DIV with a style applied via ng-style (because some values are calculated 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 ng-click by changing the ng-style value to another style also set 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’t use variables in css, and the project doesn’t allow using SASS or LESS.

Answer 1

Your code is missing a lot to make an ideal answer, but I’ll give you a minimal example where it will work for an element like this when you click the square, it will change the style as set in tileStyle and 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>

That is, clicking on the element will change the style configured in your code.

---

Now according to your issue that put all the controller, a variable must be created to contain all status, and this can be done at runtime by assigning true for all, from it exchange the value and also the style, example:

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>