angularjsangular-ngmodelangularjs-ng-clickng-filter

AngularJS dynamic filter ng-repeat not firing ng-click


I have a ng-repeat with a cutsom filter to include/exclude tasks based on their complete status and the user's current settings. I works fine, until when the ng-model change causes the task to no longer be part of the filter, it doesn't fire the ng-click event.

In the specific case below, the users setting are to not show completed tasks. When the check box is completed, the task.complete changes to true which causes it to be removed from the filter (fine so far), but the toggleCompleteTask(user,task) on the ng-click does NOT fire (this updates the tasks in a DB). If I first change the user setting to show both complete and uncompleted tasks, it all works fine, so by removing it from the filter somehow stops the ng-click.

How can I remove from the filter AND fire the ng-click event?

Here is my repeat:

<li ng-repeat="task in display_group.tasks | showHiddenAndCompleted:user" mahi-task></li>

And my custom filter:

angular.module('mahiFilters', []).filter 'showHiddenAndCompleted', ->
  (tasks, user) ->
    items =
      out: []

    if tasks
      items.out.push.apply(items.out, tasks.filter (t) -> return t.complete if user.show_completed)
      items.out.push.apply(items.out, tasks.filter (t) -> return !t.complete if user.show_uncompleted)

      if !user.show_hidden #loop through all tasks and add remove those that are hidden by user items.out array
        i = items.out.length - 1
        while i >= 0
          if items.out[i].hidden_by_user == true
            items.out.splice i, 1
          i--

    items.out #retun the items.out

And the input check box:

<input ng-click="toggleCompleteTask(user,task)" type="checkbox" ng-model="task.complete">

Solution

  • Try ng-change instead of ng-click :

    <input ng-change="toggleCompleteTask(user,task)" type="checkbox" ng-model="task.complete">