Question

我想知道是否可以使用一级绑定和类的ng-class来评估每个摘要周期。

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

我知道我可以一次用ng-class="::{...}"绑定完整的ng-class 但我需要一次绑定一个特定的表达

当然，这件事并不奏效：

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

有办法吗？

Answer 1

方法1：

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

方法2：

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

Answer 2

我能想到这样做的一种方式（如果我按照你想说的那样）如下......

.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

Answer 3

一次性绑定的一个重要部分是，在“表达式”未定义之前，它不受约束。到目前为止，@ ifadey的最佳答案是，当“表达式”未定义时，他的方法1将计算为空字符串，这将被绑定。这与预期的特征行为相反。方法2在这种后期绑定方案中同样无益。

请正确地做到这一点，直接回答操作问题：

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

或技术上更正确但丑陋：

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

ng-class一次性绑定

3 个答案: