如何使用角js来动态地使用我的css ?

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

你好，我想用AngularJS动态控制css。

.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?

我想使用angularJS修改. graphics -wrapper:after的宽度值。我怎么做呢?

Thank you

谢谢你！

2 个解决方案

#1

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

最佳实践是使用ng-class并根据您的条件切换css类，例如:

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>

#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:

我将在与。graphics -wrapper相同的元素中声明另一个类，比如。graphics -wrapper dynamic，并设置一个角变量(下面，这个变量被命名为dynamic)，它返回真或假，并使用ng-class实现css

.graph-wrapper-dynamic {
    width: 100%;
 }

<div class="graph-wrapper" ng-class="{'graph-wrapper-dynamic': dynamic}"></div>

Edited to implement ng-class object syntax.

编辑以实现ng类对象语法。

#1