angular ng-class 有两个 classes，一个来自变量名，一个带有条件

Question

我遇到了一个问题，可能是我在 Internet 上找不到的一些语法。

我创建了一个 angular 指令，它接收一个 class 名称作为范围变量。在模板中，我想添加给定的 classname 和另一个 class 作为条件。类似的东西：

app.directive('MyDirective', function () {
    return {
        restrict: 'E',
        scope: {
            className: '=',
        },
        template: "<div ng-class="className, 'otherClass':{expression}"></div>"
    }
});

谢谢:)

Answer 1

假设 className 是作用域上的属性：

您可以使用带有对象文字语法本身的数组表达式。

 <div ... ng-class="[className, {true : 'otherClass'}[expression]]"

或与class

混合使用

<div ... class="{{className}}" ng-class="{'otherClass': expression}"

Answer 2

change your code like this
    app.directive('MyDirective', function () {
    return {
        restrict: 'E',
        scope: {
            className: '=',
        },
        template: "<div ng-class="'className':true, 'otherClass':    {expression}"></div>"
    }
    });

Answer 3

您可以将范围数据与某些条件或表达式一起使用。

<div ng-class="{'{{item.name}}' : item.condition}">

或

<div ng-class="$variableToEvaluate ? '{{item.nameiftrue}}' : '{{item.nameiffalse}}'">

angular ng-class 有两个 classes，一个来自变量名，一个带有条件

angular ng-class with two classes, one from a variable name and one with condition

javascript

angularjs

angularjs-directive

ng-class