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

Question

样本表

<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="<% message.read %>"用data-ng-class="success"

我没有运气也试过以下事情: 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 '';
        });
    };
}]);

Answer 1

从角度文档:

ngClass是一个将被评估的表达式."评估的结果可以是一个字符串,表示空格分隔的类名,数组或类名到布尔值的映射.对于映射,值为truthy的属性的名称将添加为css元素的类."

从而,

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

请参阅http://plnkr.co/edit/8zSo5c?p=preview示例