AngularJs 条件 class 和常规 class

Question

这里是问题所在，我需要应用条件 class（如果完成为真，则添加 'card--done' class），并且，还要添加存储的 class在 task.color.

代码如下：

        <!-- Card -->
        <div class="card" 
            ng-repeat="task in projectsData[currentProject].tasks track by $id(task)"
            ng-class="{'card--done': task.completed}, task.color">
        </div><!-- End of card -->

我几乎尝试了所有我能想到的方法，但没有任何方法可以组合这些方法。

我也试了一个功能，还是不行

ng-class="[getClasses(), {'card--done': task.completed}]"

花了一个半小时，请帮忙:)

Answer 1

你可能会这样做：

ng-class="[(task.completed && 'card--done') , task.color]"

如果 task.completed 是假的，它将向元素添加 class 名称 "false"，但它应该是无害的。问题是当你提供一个数组时，它将使用数组中每个项目的字符串表示，所以使用一个对象只会显示 [Object object]，除非你用括号表示法评估对象，如：

 ng-class="[{true: 'card--done'}[task.completed], task.color]"
 //ng-class="[getClasses(), {true: 'card--done'}[task.completed]]"

Plnkr

Answer 2

我无法在 ng-class.

中使用模型中的条件和值

这是我尝试过的： http://jsfiddle.net/walvekarnikhil/jLku2s0c/

<div class="card" 
        ng-repeat="task in tasks"
        ng-class="[task.color,task.status]">
            <h2>{{ task.name }} </h2>                
</div>

var tasks = [ {name:'A',status:'pending',color:'card-red'},
             {name:'B', status:'complete',color:'card-yellow'},
             {name:'C', status:'started',color:'card-blue'}];

我已将状态作为属性添加到任务，并为这些状态添加了 CSS。

AngularJs 条件 class 和常规 class

AngularJs condition class And regular class

angularjs

conditional

ng-class