AngularJS - 基于 ng-switch 语句将类应用于 <td>答案

【问题标题】：AngularJS - Apply class to <td> based on ng-switch statementAngularJS - 基于 ng-switch 语句将类应用于 <td>
【发布时间】：2014-08-20 10:33:19
【问题描述】：

我在<td> 上有一个简单的 ng-repeat。在 ng-repeat 中是一个 ng-switch 指令。我想知道当满足特定的 ng-switch 条件时如何将 CSS 类应用于 <td>。

<td ng-repeat="deposit in MyData.MyDeposits.slice(0, 12)" ng-switch="deposit" ng-class="darkGrey: darkenCell == 1">
    <span ng-switch-when="0">U</span>
    <span ng-switch-when="1">D</span>
    <span ng-switch-when="2">2</span>
    <span ng-switch-when="3">3</span>
    <span ng-switch-when="4">3</span>
    <span ng-switch-default ng-init="darkenCell = 1" >Dark</span>
</td>

但是我看到以下错误：

Error: [$parse:syntax] http://errors.angularjs.org/1.2.8/$parse/syntax?p0=%3A&p1=is%20an%20unexpected%20token&p2=6&p3=darkGrey%3A%20darkenCell%20%3D%3D%201&p4=%3A%20darkenCell%20%3D%3D%201

【问题讨论】：

对于初学者，您应该将 darkGrey: darkenCell == 1 括在花括号 {darkGrey: darkenCell == 1} 中。
@SergiuParaschiv - 摆脱了错误但看不到正在应用的 CSS。我需要在我的控制器中初始化 darkenCell = 0 吗？

标签： angularjs angularjs-scope angularjs-ng-repeat ng-class ng-switch

【解决方案1】：

你的 ng-init 应该在顶部，以便它首先被初始化然后被使用，不要忘记开关将有自己的范围，所以使用 $parent 访问父级

<td ng-init="darkenCell = 0" ng-repeat="deposit in MyData.MyDeposits.slice(0, 12)" ng-switch="deposit" ng-class="{darkGrey: darkenCell == 1}">
    <span ng-switch-when="0">U</span>
    <span ng-switch-when="1">D</span>
    <span ng-switch-when="2">2</span>
    <span ng-switch-when="3">3</span>
    <span ng-switch-when="4">3</span>
    <span ng-switch-default ng-show="$parent.darkenCell = 1">Dark</span>
</td>

Plunkr Example

【讨论】：

但是如果触发了 ng-switch-default 情况，我只希望单元格具有 darkGrey CSS 类，因此是“深色”文本。
@OamPsy：更新了答案，如果你想默认显示一个类，你需要在该元素上使用 ng-class
我不确定我是否解释不正确。我正在显示的 lsit... 或者说 U、D、2、3、4 或 Dark... 对于表示 Dark 的，我希望有 darkGrey CSS 类。
虽然这个逻辑有道理，但 CSS 类未能应用。
谢谢你的预期。