filter doesn't work in angualrJS

Question

I am making an extension with angularJS, and I have a problem with filter.

I have a button in popup page, when clicked, the button's ancestor node was blocked, and the information about its ancestor will be store in localStoarge so when fetch data from the sever again I would use a filter to filter the previous information.

here's my code:

in filter:

app.filter('hideDeadline', function()
{
  return function(deadline){
    if(0 > JSON.parse(localStorage['rmed_deadlines']).indexOf(deadline)){
      return deadline;
    }
  }
}) 

in popup.html:

<li class="deadline" ng-repeat="deadline in deadlines | filter:hideDeadline | orderBy:'time' " ng-hide="hideDeadline">
  <div class="btn-group">
     <button class="btn" ng-click="removeDeadline(deadline)">complete</button>
     <button class="btn" ng-click="removeDeadline(deadline)">ignore</button>
  </div>
  <hr/>  
</li>

and something in my controller.js:

$scope.removeDeadline = function(deadline){
  var old_value = JSON.parse(localStorage.getItem('rmed_deadlines'));
  old_value.push(deadline);
  localStorage.setItem('rmed_deadlines', JSON.stringify(old_value));
  this.hideDeadline = true;
}

but it doesn't work. when clicked, the node can be blocked, and the information would be stored in localStorage, but when reopen the extension, the completed item still be there, does it means something wrong with the filter?

Answer 1

Have you tried:

<li class="deadline" ng-repeat="deadline in deadlines | hideDeadline | orderBy:'time' " ng-hide="hideDeadline">

filter is actually a built in filter that takes a list and trims it down. You can pass a couple things, but in your case you want to return a function that returns true for all items to "show".

<li class="deadline" ng-repeat="deadline in deadlines | deadlineFunc | orderBy:'time' " ng-hide="hideDeadline">

---

$scope.deadlineFunc = function(deadline){  
    //return true to show item
    if(0 > JSON.parse(localStorage['rmed_deadlines']).indexOf(deadline)){
      return deadline;
    }
 }