javascript – How to change a :after class in angularjs using ng-class?

Question:

I have a div with an after and I would like to change the background color of this after dynamically via the controller, but I am not having success importing the ng-class into the parent div.

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

Obs: I have different styles in the div and the :after. The div has a background of one color and my after has a background of another color and I want to change only the after.

Answer:

Take a look at the code below and see if it helps.

Or see working at 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>

Post Views: 0