how to dynamic my css using angular js

Question

Hi I would like to use AngularJS to control the css dynamically.

.graph-wrapper { border-top-left-radius: 200px; border-top-right-radius: 200px; height:200px; width:100%; overflow:hidden; border:2px dashed gold; border-bottom: none; } .graph-wrapper:after{ content:''; display:block; width: 80%; height: 100%; background:gold; -webkit-animation: fill 4s ease 1; animation: fill 4s ease 1; } @-webkit-keyframes fill { from { width:0; } to { width:80%; } } @keyframes fill { from {width:0;} to {width: 80%;} } 

and I want to use angularJS to change width value of .graph-wrapper:after. How can I do that?

Thank you

Answer 1

Best practice is to use ng-class and switch css classes based on your conditions, e.g.:

var myApp = angular.module('myApp', []); myApp.controller('MyCtrl', function($scope) {});

.strike { text-decoration: line-through; } .bold { font-weight: bold; } .red { color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="MyCtrl"> <p ng-class="{strike: deleted, bold: important, red: error}">Map Syntax Example</p> <input type="checkbox" ng-model="deleted"> deleted (apply "strike" class)<br> <input type="checkbox" ng-model="important"> important (apply "bold" class)<br> <input type="checkbox" ng-model="error"> error (apply "red" class) </div>

Answer 2

I would declare another class in the same element that you have .graph-wrapper, something like .graph-wrapper-dynamic, and set up an angular variable (below, that variable is named "dynamic") that returns true or false and use ng-class to implement the css something like:

.graph-wrapper-dynamic { width: 100%; } <div class="graph-wrapper" ng-class="{'graph-wrapper-dynamic': dynamic}"></div> 

Edited to implement ng-class object syntax.