单击按钮时过滤 ng-repeat

Question

我有一个在 $scope.notifications 中的 Json。

**Json**
0:{ 
    $$hashKey: "object:31"
    action: "wrote a comment"
    creationDate: "2015-11-23 13:48:55.0"
    post: Object
    seen: true
    user: Object
   }

这个 Json 有一个 key : seen 可以是 true 或 false 。我必须在 ng-repeat 中过滤掉那些在点击按钮 未读通知时键 :seen is= false 的对象。

然后在单击所有通知按钮时再次清除过滤器。

HTML

<div class="col-xs-12 col-sm-6 col-md-8">
    <ul class="notifications-action-menu text-center">
        <li>
            <button type="button" class="btn btn-link btnUnreadFilter active" data-filter="all" id="btnShowAll">All Notifications</button>
         </li>
         <li>
             <button type="button" class="btn btn-link btnUnreadFilter" data-filter="unread" id="btnShowOnlyUnread" ng-click="actions.unreadNotifications()">Unread Notifications</button>
         </li>
      <ul></ul>
      </ul>
</div>
<div class="col-xs-12">
<div id="notificationsListWrapper" ng-repeat="notification in notifications" ng-hide="{{notification.seen == seen}}">
    <div class="notification-item" ng-class="{'read' : notification.seen == true}">
        <div class=" no-click-bind mark-as-read-btn">
            <button type="button" class="no-click-bind" data-toggle="tooltip" data-placement="top" data-original-title="Mark as read"  ng-click="actions.redirectToPost(notification.post.uuid, $index)">
            <i class="fa fa-check"></i>
            </button>
         </div>
        <div class="notification-body">
            <div class="notification-details">
                <a href="" class="doc-profile-img"><img class="" alt="{{notification.user.authorName}}" ng-src="{{(notification.user.thumbnailUrl) ? notification.user.thumbnailUrl :'/assets/images/avatars/avatar_100x100.png'}}">
                </a>
                <a>{{notification.user.authorName}}</a><span class="notification-action"> {{notification.action}}</span>
                <a href="/news/abcd" class="notification-url no-click-bind">{{notification.post.title}}
               </a>
               <div class="notification-meta"><i class="fa notification-type-icon fa-calendar"></i> <small class="notification-datetime text-muted" title="Thursday, January 21, 2016 at 5:26 pm">Jan 21 2016</small>
              </div>
              <div class="notification-actions"></div>
          </div>
      </div>
      <div ng-if="notification.post.featuredAttachmentUrl != '' " class="notification-url-img"><img alt="" ng-src="{{notification.post.featuredAttachmentUrl}}"></div>
     </div>
</div>

Answer 1

尝试类似：

ng-repeat="notification in notifications | filter:seenFilter"

其中 seenFilter 由控制器设置为 {seen:true}、{seen:false} 或 true。示例：

$scope.actions.unreadNotifications = function(){
  $scope.seenFilter = {seen:false}
}