AngularJS - 使用 ngRepeat 时突出显示特定的表行答案

【问题标题】：AngularJS - Highlight specific table rows when using ngRepeatAngularJS - 使用 ngRepeat 时突出显示特定的表行
【发布时间】：2014-03-28 07:08:25
【问题描述】：

样本表

<table class="table table-condensed table-striped table-responsive">
<thead>
    <tr>
        <th>Sender</th>
        <th>Subject</th>
        <th>Received</th>
        <th>Actions</th>
    </tr>
</thead>
<tbody>
    <tr data-ng-repeat="message in messages | filter:search" data-ng-class="<% message.read %>">
        <td>
            <% message.sender.first_name %> <% message.sender.last_name %>
        </td>
        <td>
            <% message.subject %>
        </td>
        <td>[ TODO ]</td>
        <td>[ TODO ]</td>
    </tr>
</tbody>
</table>

我的 API 返回一个消息数组，每条消息都有一个 read 布尔属性。如果 message.read 为 false，我希望该行的类为 success 以突出显示表中的所有未读消息。

我的尝试不正确，但我想做的是用data-ng-class="success" 填充data-ng-class="<% message.read %>"

我还尝试了以下方法，但没有运气：data-ng-class="rowClass(message)">

在控制器中：

var messageControllers = angular.module('messageControllers', []);

messageControllers.controller('MessageInboxCtrl', ['$scope', '$routeParams', 'Message',
    function ($scope, $routeParams, Message) {
        $scope.folder = 'Inbox';
        $scope.messages = Message.query();

        $scope.rowClass = (function(message) {
            if (!message.read) return 'success';
            else return '';
        });
    };
}]);

【问题讨论】：

标签： html angularjs twitter-bootstrap

【解决方案1】：

来自角度文档：

ngClass 是一个将被评估的表达式。 “评估的结果可以是表示以空格分隔的类名的字符串、数组或类名到布尔值的映射。在映射的情况下，其值为真的属性的名称将添加为 css类的元素。”

因此，

  data-ng-class="{success: !message.read}"

查看示例http://plnkr.co/edit/8zSo5c?p=preview

【讨论】：