Dynamically change a css class' properties with AngularJS

Question

I like the way examples by bootstrap looks

<css>
.bs-docs-example {
  background-color: #FFFFFF;
  border: 1px solid #DDDDDD;
  border-radius: 4px 4px 4px 4px;
  ...
}
.bs-docs-example:after {
  background-color: #F5F5F5;
  border: 1px solid #DDDDDD;
  border-radius: 4px 0 4px 0;
  color: #9DA0A4;
  content: "Title";
  ...
}

But I need to change the content in the .bs-docs-example:after dynamically as this:

<html>
<div class="bs-docs-example" ng-style="content:'{{ title }}';"
     ng-repeat="title in titles">

Is this something possible? How?

Your html code contains angular js tags. But :after will work different. Search for css :after documentation. — Jeyasithar
– Jeyasithar, Commented Sep 20, 2013 at 13:54
Ok, the :after isn't part of the dom, but someone found a way to change dynamically the CSS yet, it applies to all : See this example (before and after are quite the same) jsfiddle.net/aKbmq — Romain
– Romain, Commented Sep 20, 2013 at 14:00

Vince · Accepted Answer · 2017-02-02 13:48:41Z

14

I did something similar using ng-bind-html, I lacked control, over the content, so I modify a class that'll handle it afterwards

var somecolorvar = "#F00";
$scope.mystyles = ".something:after { color: " + somecolorvar + "; }";

<style ng-bind-html="mystyles"></style>

Then you'll get something like this

<style>.something:after { color: #F00; }</style>

EDIT: You can also handle the issue above via css attr() which will pull the attribute into the content

.something:after {
    display: inline;
    content: '- Value ' attr(value);
}

<div class="something" value="123">this is</div>
<div class="something" value="456">this be</div>

You'll see something like:

this is - Value 123
this be - Value 456

edited Feb 2, 2017 at 13:48

answered Mar 27, 2015 at 19:52

Vince

7971 gold badge8 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

nabin Over a year ago

Perfect! this is what I was searching for

jlguenego Over a year ago

do not forget to use ngSanitize, because ng-bind-html cannot work without it.

Community · Accepted Answer · 2017-05-23 12:01:39Z

You can use ng-style to dynamically change a CSS class property using AngularJS.

See the code below or this plunk (http://plnkr.co/edit/n4NlIfgfXIiNHWu5oTzS?p=preview)

I've created an array of colours to be used by the ng-repeat and change the background-color of each item dynamically.

Note that although all the items have a class called original with red background, that value is updated (override) with a new colour from the array.

So now you're probably thinking: "Cool! If I can change the class color property dynamically I should be able to do the same with any other property, like the content one right ?!?"

The answer is "Yes & No".

It seems pseudo selectors like :after and :before are treated differently.

"Although they are rendered by browsers through CSS as if they were like other real DOM elements, pseudo-elements themselves are not part of the DOM, and thus you can't select and manipulate them directly with AngularJS, jQuery (or any JavaScript APIs for that matter"

You can find a full explanation on this post: (https://stackoverflow.com/a/5041526/1310945)

Have said that, I believe you can probably manage to work around this, using this solution (https://stackoverflow.com/a/16507264/1310945).

I haven't tried yet - but I might do another time just for fun.

On a side note, maybe there's a better solution ( and more AngularJs style approach) for what you're trying to do using ng-class.

Anyway hope this at least send you on the right direction. :)

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
  <title>Document</title>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>

  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.0.0/united/bootstrap.min.css">

  <style>
    ul {
      list-style-type: none;
      color: #fff;
    }

    li {
      padding: 10px;
      text-align: center;
    }

    .original {
      background-color: red;
    }
  </style>

  <script>

  var myApp = angular.module('myApp', []);


  myApp.controller("myAppCtrl", ["$scope", function($scope) {

      $scope.colors = ['#C1D786', '#BF3978', '#15A0C6', '#9A2BC3'];

      $scope.style = function(value) {
          return { "background-color": value };
      }

  }]);


  </script>

</head>
<body>

<div ng-controller="myAppCtrl">
  <div class="container">
    <div class="row">
      <div class="span12">
        <ul>
          <li ng-repeat="color in colors">
            <h4 class="original" ng-style="style(color)"> {{ color }}</h5>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

</body>
</html>

Thanks for your answer but I was trying to access :after which isn't part of the DOM. In this case I have search a much more complicated way to do something simple.

Romain · Accepted Answer · 2016-02-26 09:00:03Z

1

Actually I found a solution that doesn't involve :after (I'm so bad in CSS I haven't thought about it sooner ...) I also learn a bit in CSS. Here goes :

<css>
.bs-docs-example {
   background-color: #FFFFFF;
   border: 1px solid #DDDDDD;
   border-radius: 4px 4px 4px 4px;
   ...
}
.bs-docs-example-title {
  background-color: #F5F5F5;
  border: 1px solid #DDDDDD;
  border-radius: 4px 0 4px 0;
  color: #9DA0A4;
  content: "Title";
  ...
}

and use it like this :

<html>
<div class="bs-docs-example" ng-repeat="title in titles">
<span class="bs-docs-example-title">{{ title }}</span>
</div>

I hoped that helps.

edited Feb 26, 2016 at 9:00

answered Sep 23, 2013 at 12:09

Romain

3,7038 gold badges33 silver badges52 bronze badges

Comments

user4176866 · Accepted Answer · 2014-11-12 09:23:00Z

i write the solution which work for me:

Html Page

      <div class="list-group">
        <a href ng-click="setSelectedLink('wiki')"      ng-class="{active:isSelectedLink('wiki')}"      class="list-group-item">Wiki</a>
        <a href ng-click="setSelectedLink('tacheList')" ng-class="{active:isSelectedLink('tacheList')}" class="list-group-item">Link</a>
      </div>

Inside your Controller of this html page: JS

    $scope.tab = 'wiki';//by default the first is selected
    $scope.setSelectedLink = function (tabId) {
        $scope.tab = tabId;
        console.log("setTab: "+tabId);
        $location.path('/'+tabId);
    }
    $scope.isSelectedLink = function (tabId) {
        return $scope.tab === tabId;
    }

Collectives™ on Stack Overflow

Dynamically change a css class' properties with AngularJS

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related