web-dev-qa-db-fra.com

reliure ponctuelle ng-class

Je me demande s'il est possible d'avoir une classe ng avec une classe liée une fois et une classe évaluée à chaque cycle de résumé.

<div ng-class="{'one_time_binded_class': isMonkey(), 'not_one_time_binded_class': isUnicorn()}"></div>

Je sais que je peux un jour lier l'intégralité de la classe ng à l'aide de ng-class="::{...}"

Bien sûr, cette chose ne fonctionne pas:

<div ng-class="{'my_static_class': ::isMonkey(), 'my_dynamic_class': isUnicorn()}"></div>

Y a-t-il un moyen de le faire?

angularjsclass
30
frlinw

Méthode 1: 

class="some-class {{::expression ? 'my-class' : ''}}"

Méthode 2: 

ng-class="::{'my-class': expression}"
53
ifadey

Une façon dont je peux penser à faire cela (si je suivais ce que vous essayiez de dire) est la suivante ...

.blue{
    color: blue;
}
.underline{
    text-decoration: underline;
}
.lineThrough{
    text-decoration: line-through;
}

<div ng-app ng-controller="myCtrl">
    <p ng-class="{'blue': isMonkey()}" class="{{isUnicorn() ? dynamicClass: ''}}">My Text</p>
    <button ng-click="monkey = !monkey">Monkey</button>
    <button ng-click="Unicorn = !Unicorn">Unicorn</button>
    <button ng-click="toggleClass()">Toggle</button>
</div>

function myCtrl($scope) {
    $scope.dynamicClass = "underline";
    $scope.monkey = true;
    $scope.Unicorn = true;
    $scope.isMonkey = function () {
        return $scope.monkey;
    }
    $scope.isUnicorn = function () {
        return $scope.Unicorn;
    }
    $scope.toggleClass = function(){
        $scope.dynamicClass = $scope.dynamicClass === "underline"? "lineThrough": "underline";
    }
}

JSFiddle

0
Aakash

Une partie importante de la liaison ponctuelle est qu'elle ne soit pas liée tant que l'expression 'expression' n'est pas indéfinie. La meilleure réponse à ce jour, par @ifadey, sa Méthode 1 est évaluée comme une chaîne vide lorsque 'expression' est indéfinie, ce qui est lié. Ceci est contraire au comportement attendu de la fonctionnalité. La méthode 2 est également inutile dans ce scénario de liaison tardive.

Faites cela correctement, en répondant directement à la question de l'op:

class="some-class {{::expression ? 'one-time-class' : undefined}}"
ng-class="{ 'my-dynamic-class' : expression2 }"

ou le plus correct techniquement mais moche:

class="some-class {{::expression ? 'one-time-class' : (expression===undefined ? undefined : '')}}"
0
shadybones