1

Estou fazendo um jogo em Web com diferentes níveis e preciso alterar o estilo de uma div utilizando um código salvo dentro de um array no AngularJS. Além disso, o jogo possui uma divisão na tela, onde em uma metade o usuário digita o código e na outra, aparece o resultado. Cada nível possui um estilo diferente para o background da visualização, então precisa ser carregado toda vez.

A parte do arquivo HTML é a seguinte:

<div id="background"></div>

E o código referente ao estilo está da seguinte forma:

$scope.css = [
    {
        'estilo': 'background-image : url(...); ...'
    }
];

Outra forma já testada:

$scope.css = [
    {
        //nível 1
        'background-image': 'url(...)',
        'position' : 'absolute',
         ...
    },
    {
        //nível 2
        ...
    }
];

Entretanto não estou conseguindo exibir o resultado na visualização. Nada aparece. Tentei adicionar ng-style="{{css}}" à div mas não funcionou. Qual a forma correta de fazer essa atribuição de estilo?

1 Resposta 1

1

Acho que seria mais fácil você criar o estilo que deseja dentro do arquivo .css.

E para validar no HTML existe a diretiva no angularJs chamada ng-class onde você pode atribuir um estilo com devida condição... Exemplo:

No seu arquivo CSS

.classe1 {
   background-color: red;
   border: 1px solid black;
}

.classe2 {
   background-color: green;
   border: 1px solid black;
}

no seu HTML validaria a div assim:

<div ng-class="condição ? 'classe1' : 'classe2"></div> 

Eu usei um if ternario onde sua estrutura é :

Condiçao ? se true executa aqui : se false executa aqui ;

exemplo:

 1 == 1 ? console.log('verdade') : console.log('false');

no caso do seu HTMLse sua condição for verdadeira ira atribuir o classe1 para a div senão sera atribuído a classe2

1
  • Meu era apenas o local onde inseria o ng-controller. Está funcionando perfeitamente, obrigado pela ajuda. De qualquer forma, consegui fazer da seguinte maneira: ng-class="{'level-one': cur_level == '1', 'level-two': cur_level == '2', 'level-three': cur_level == '3'} 1/02/2019 às 15:32

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 .