Question

以下代码不会更改表格的任何颜色。行上没有看到红色或绿色（正确渲染的标签除外）。

有什么想法吗？

<table class="table table-striped table-hover">
    <thead>
        <tr>
            <th>Player</th>
            <th>Number</th>
            <th>Still standing?</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="player in players" ng-style="player.standing ? '{'color':'green'}' : {'color':'red'}">
            <td ng-cloak>
                <span ng-show="player.standing">
                    {{player.name}}
                </span>
                <span ng-show="!player.standing">
                    <strike>{{player.name}}</strike>
                </span>
            </td>
            <td ng-cloak>{{ player.associatedNumber }}</td>
            <td ng-cloak>
                <span 
                    ng-class="player.standing ? 'label label-success': 'label label-danger'"
                    ng-show="player.standing">
                    Yes
                </span>
                <span 
                    ng-class="player.standing ? 'label label-success': 'label label-danger'"
                    ng-show="!player.standing">
                    No
                </span>
            </td>
        </tr>
    </tbody>
</table>

数据集..

[{
    "name": "Robert B",
        "associatedNumber": 21,
        "standing": true
}, {
    "name": "Martin C",
        "associatedNumber": 55,
        "standing": false
}, {
    "name": "Bobby B",
        "associatedNumber": 15,
        "standing": true
}]

Answer 1

您的表达式未为self.date.strftime("%u") == 5生成有效结果。你想要

ng-style

您还可以使用相应的Bootstrap contextual text classes，以便它们与其他代码中的ng-style="{color: player.standing ? 'green' : 'red'}"类对齐

label

此外，您的<tr ng-repeat="player in players" ng-class="{ 'text-success': player.standing, 'text-danger': !player.standing}">跨度有点奇怪。也许试试

ng-class

而不是具有冗余逻辑的两个跨度。

尝试有条件地使用ng风格

1 个答案: