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