Comment appliquer les styles css à AngularJS?

j'ai trouvé des problèmes lors de l'application des classes à l'intérieur de table Eléments quand j'avais une classe déjà appliquée à l'ensemble de la table (par exemple, une couleur appliquée aux lignes impaires <myClass tbody tr:nth-child(even) td> ). Il semble que lorsque vous inspectez l'élément avec Developer Tools , le element.style n'a pas de style assigné. Donc, au lieu d'utiliser ng-class , j'ai essayé d'utiliser ng-style , et dans ce cas, le nouvel attribut CSS apparaît à l'intérieur element.style . Ce code fonctionne très bien pour moi:

<tr ng-repeat="element in collection">

    [...amazing code...]

    <td ng-style="myvar === 0 && {'background-color': 'red'} ||
                  myvar === 1 && {'background-color': 'green'} ||
                  myvar === 2 && {'background-color': 'yellow'}">{{ myvar }}</td>

    [...more amazing code...]

</tr>

Myvar est ce que je suis en train d'évaluer, et dans chaque cas, j'applique un style à chaque <td> en fonction de la valeur myvar , qui écrive le style actuel appliqué par la classe CSS pour la table entière.

mise à JOUR

Si vous souhaitez appliquer une classe à la table par exemple, lors de la visite une page ou dans d'autres cas, vous pouvez utiliser cette structure:

<li ng-class="{ active: isActive('/route_a') || isActive('/route_b')}">

fondamentalement, ce dont nous avons besoin pour activer une classe ng est la classe à appliquer et une déclaration vraie ou fausse. Vrai s'applique à la classe et false ne fonctionne pas. Nous avons donc ici deux vérifications de l'itinéraire de la page et un OU entre eux, donc si nous sommes en /route_a OU nous sommes dans route_b , la classe active sera appliquée.

cela fonctionne juste avoir une fonction logique sur la droite qui retourne vrai ou faux.

ainsi, dans le premier exemple, style ng est conditionné par trois énoncés. Si tous sont faux, aucun style n'est appliqué, mais suivant notre logique, au moins un va être appliqué, donc, l'expression logique va vérifier quelle variable la comparaison est vraie et parce qu'un tableau non vide est toujours vrai, qui laissera un tableau comme retour et avec un seul vrai, considérant que nous utilisons ou pour l'ensemble de la réponse, le style restant sera appliqué.

d'ailleurs, j'ai oublié de vous donner la fonction isActive ():

$rootScope.isActive = function(viewLocation) {
    return viewLocation === $location.path();
};

NOUVELLE MISE À JOUR

Ici vous avez quelque chose que je trouve vraiment utile. Quand vous devez appliquer une classe en fonction de la valeur d'une variable, par exemple, une icône en fonction du contenu du div , vous pouvez utiliser le code suivant (très utile dans ng-repeat ):

<i class="fa" ng-class="{ 'fa-github'   : type === 0,
                          'fa-linkedin' : type === 1,
                          'fa-skype'    : type === 2,
                          'fa-google'   : type === 3 }"></i>

icônes de Font Awesome

cela fonctionne bien lorsque la classe ng ne peut pas être utilisée (par exemple lors de la conception SVG):

ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}"

(je pense que vous devez être sur les dernières instable Angulaire d'utiliser ng-attr-, je suis actuellement sur 1.1.4)

j'ai publié un article sur le travail avec AngularJS+SVG. Il parle de cette question et de nombreuses autres. http://www.codeproject.com/Articles/709340/Implementing-a-Flowchart-with-SVG-and-AngularJS

span class="circle circle-{{selectcss(document.Extension)}}">

et code

$scope.selectcss = function (data) {
    if (data == '.pdf')
        return 'circle circle-pdf';
    else
        return 'circle circle-small';
};

css

.circle-pdf {
    width: 24px;
    height: 24px;
    font-size: 16px;
    font-weight: 700;
    padding-top: 3px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    background-image: url(images/pdf_icon32.png);
}

Cette solution a fonctionné pour moi

<a ng-style="{true: {paddingLeft: '25px'}, false: {}}[deleteTriggered]">...</a>

une autre option lorsque vous avez besoin d'un style css simple d'une ou deux propriétés:

:

<tr ng-repeat="element in collection">
    [...amazing code...] 
    <td ng-style="{'background-color': getTrColor(element.myvar)}">
        {{ element.myvar }}
    </td>
    [...more amazing code...]
</tr>

contrôleur:

$scope.getTrColor = function (colorIndex) {
    switch(colorIndex){
        case 0: return 'red';
        case 1: return 'green';
        default: return 'yellow';
    }
};

vous pouvez utiliser l'expression ternaire. Il y a deux façons de le faire:

<div ng-style="myVariable > 100 ? {'color': 'red'} : {'color': 'blue'}"></div>

ou...

<div ng-style="{'color': (myVariable > 100) ? 'red' : 'blue' }"></div>

voir l'exemple suivant

<!DOCTYPE html>
    <html ng-app>
    <head>
    <title>Demo Changing CSS Classes Conditionally with Angular</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="res/js/controllers.js"></script>

    <style>

    .checkboxList {
        border:1px solid #000;
        background-color:#fff;
        color:#000;
        width:300px;
        height: 100px;
        overflow-y: scroll;
    }

    .uncheckedClass {
       background-color:#eeeeee;
       color:black;
    }
    .checkedClass {
        background-color:#3ab44a;
        color:white;
    }
    </style>

    </head>
    <body ng-controller="TeamListCtrl">
    <b>Teams</b>
    <div id="teamCheckboxList" class="checkboxList">

    <div class="uncheckedClass" ng-repeat="team in teams" ng-class="{'checkedClass': team.isChecked, 'uncheckedClass': !team.isChecked}">

    <label>
    <input type="checkbox" ng-model="team.isChecked" />
    <span>{{team.name}}</span>
    </label>
    </div>
    </div>
    </body>
    </html>

As of AngularJS v1.2.0 rc, ng-class et même ng-attr-class échouent avec les éléments SVG (ils ont fonctionné plus tôt, même avec liaison normale à l'intérieur de l'attribut de classe)

spécifiquement, aucun de ces travaux maintenant:

ng-class="current==this_element?'active':' ' "
ng-attr-class="{{current==this_element?'active':' '}}"
class="class1 class2 .... {{current==this_element?'active':''}}"

comme solution de contournement, je dois utiliser

ng-attr-otherAttr="{{current==this_element?'active':''}}"

et puis le style en utilisant

[otherAttr='active'] {
   ... styles ...
}

une façon de plus (dans le futur) d'appliquer le style conditionnellement est de créer conditionnellement le style scoped

<style scoped type="text/css" ng-if="...">

</style>

mais de nos jours seulement FireFox soutient des styles scoped.

il y a une option de plus que j'ai récemment découvert que certaines personnes peuvent trouver utile parce qu'elle permet de changer une règle CSS à l'intérieur d'un élément style - évitant ainsi le besoin d'utilisation répétée d'une directive angulaire telle que ng-style, ng-class, ng-show, ng-hide, ng-animate, et d'autres.

cette option utilise un service avec des variables de service qui sont définies par un contrôleur et surveillées par une directive attribut que j'appelle"custom-style". Cette stratégie pourrait j'ai essayé de donner quelques indications générales avec ce violon .

var app = angular.module('myApp', ['ui.bootstrap']);
app.service('MainService', function(){
    var vm = this;
});
app.controller('MainCtrl', function(MainService){
    var vm = this;
    vm.ms = MainService;
});
app.directive('customStyle', function(MainService){
    return {
        restrict : 'A',
        link : function(scope, element, attr){
            var style = angular.element('<style></style>');
            element.append(style);
            scope.$watch(function(){ return MainService.theme; },
                function(){
                    var css = '';
                    angular.forEach(MainService.theme, function(selector, key){
                        angular.forEach(MainService.theme[key], function(val, k){
                            css += key + ' { '+k+' : '+val+'} ';
                        });                        
                    });
                    style.html(css);
                }, true);
        }
    };
});

Eh bien, je vous suggérerais de vérifier l'état de votre contrôleur avec une fonction retournant vrai ou faux .

<div class="week-wrap" ng-class="{today: getTodayForHighLight(todayDate, day.date)}">{{day.date}}</div>

et dans votre contrôleur, vérifiez la condition

$scope.getTodayForHighLight = function(today, date){
    return (today == date);
}

une chose à regarder est - si le style CSS a des tirets - vous devez les supprimer. Donc, si vous voulez définir background-color , la bonne façon est:

ng-style="{backgroundColor:myColor}"