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

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

1 个答案: