CODEWITHSUNDEEP
angularjsangularjs-scopeangularjs-ng-repeatangularjs-filter
atul mishra
atul mishra

Reputation: 299

Filter in ng-repeat on clicking Button

I have a Json which m getting in $scope.notifications.

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

This Json has a key : seen which can be either true or false . I have to filter out those objects in ng-repeat whose key :seen is= false on clicking button unread notifications.

and then again clear the filter on clicking All Notifications button.

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>

Upvotes: 0

Views: 1415

Answers (1)

Thierry
Thierry

Reputation: 5243

Try something like:

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

where seenFilter is set to {seen:true}, {seen:false} or true by the controller. Example:

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

Upvotes: 1

Related Questions