3

Tenho uma div com um after e gostaria de mudar a cor do background desse after dinamicamente via controlador, porém nao estou tendo sucesso ao importar o ng-class na div pai.

<div class="infos" ng-class="myController.infoBlue">
   My Infos.
   :after
</div>

Obs: Tenho estilos diferentes na div e o :after. A div tem um background de uma cor e meu after tem um background de outra cor e eu quero mudar só o do after.

2 Respostas 2

1

Da uma olhada no codigo abaixo e ve se te ajuda.

Ou veja funcionando no http://plnkr.co/edit/zmokTDQnJsArl49ynczK?p=preview

<!doctype html>
    <html ng-app>
      <head>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script>
    function Ctrl($scope) {
      $scope.items = [{'color' : 'blue'}, {'color':'red'}, {'color':'green'}];
      $scope.selection = $scope.items[0];
    }
</script>

        <style>

           p.blue::after { 
            content: " - in Blue";
            background-color:blue;
            color: #fff;
          }

          p.red::after { 
            content: " - in Red";
            background-color:red;
            color: #fff;
          }

          p.green::after { 
            content: " - in Green";
            background-color:green;
            color: #fff;
          }

        </style>
      </head>
      <body>

    <div ng-controller="Ctrl">
      <p ng-class="selection.color">I love Brazil! </p>

      <select ng-model="selection" ng-options="item.color for item in items">
      </select>
      <tt>selection={{selection.color}}</tt>
    </div>
      </body>
    </html>
3
  • Olá não funcionou pra mim. Pois tenho estilos diferentes entre a div e o :after. a div tem um background de uma cor e meu after tem outro. e eu quero mudar só o do after.
    – peterq
    6/08/2015 às 13:40
  • @peterq Eu mudei o codigo novamente. Utilizei apenas DIVS e da mesma forma que voce falou. A parent div tem cor amarela e as outras divs com o :after tem cores independentes. plnkr.co/edit/zmokTDQnJsArl49ynczK?p=preview 6/08/2015 às 14:04
  • Olá não é a parent é na mesma div. saca? .div { background-color: blue &:after{background-color: yellow}}
    – peterq
    6/08/2015 às 14:07
0

O ng-class funciona através de uma condição, ele precisa de uma expressão para aplicar ou não determinada classe, por exemplo:

<div class="minhaDiv" ng-class="{'classeSecundaria': meuValor > 5}">Teste</div>

Neste caso a classe classeSecundaria seria aplicado à div caso a propriedade meuValor tenha um valor maior que 5.

No seu caso basta fazer essa verificação e aplicar a classe desejada. De resto é apenas configuração css.


Para mudar a cor dinamicamente, você pode fazer algo assim:

.menu:after {
  background:red;
}
.menu.azul:after {
  background:blue;
}

Veja este exemplo funcionando:

http://plnkr.co/edit/M5MtkqGSqxJRZC8t2C77?p=preview

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 .