Как динамический мой css с использованием угловых js

Question

Привет Я хотел бы использовать 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%;} 
} 

и я хочу использовать angularJS изменить ширина значение .graph-обертку: после. Как я могу это сделать?

Спасибо

Answer 1

Я бы объявить еще один класс в том же элементе, что у вас есть .graph-обертку, что-то вроде .graph-обертка-динамический, и установить угловую переменную (ниже, что переменная с именем " динамический "), который возвращает истинный или ложный и использовать нг-класс для реализации CSS-то вроде:

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

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

отредактировано реализовать синтаксис объекта нг-класс.

Answer 2

Лучшая практика заключается в использовании 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>