Angularjs: filtering ng-repeat with ng-if

Question

Our team is building a widget in ServiceNow that shows task tiles for a user. Our code looks like this so far:

  <ul class="card-list" ng-init="init(user.sys_id)">
    <li class="card-list-item" ng-repeat="task in data.tasks | orderBy: ['due_date']" ng-if="!task.finished">
      <div class="card" ng-click="task.finished ||c.onWidget(task)" ng-style="taskBorderColor(task)">
        <div class="card-image flex justify-content-center">
          <i ng-if="!task.finished && task.isOverDue" class="{{task.icon}} fa-5x" style="color:{{c.options.overdue_color}}" aria-hidden="true" alt="overdue"></i>
          <i ng-if="!task.finished && !task.isOverDue" class="{{task.icon}} fa-5x" style="color:{{c.options.pending_color}}" aria-hidden="true" alt="pending"></i>
          <i ng-if="!task.finished && task.isOptional" class="{{task.icon}} fa-5x" style="color:{{c.options.optional_color}}" aria-hidden="true" alt="optional"></i>
          <i ng-if="task.finished" class="{{task.icon}} fa-5x" aria-hidden="true" style="color:{{c.options.finished_color}}" alt="completed"></i>
        </div>
        <div class="card-content text-center">
          <h4 class="card-heading">
            <a ng-click="">{{::task.short_description}}</a>
          </h4>
          <span class="text-normal m-b-sm">${For:} {{::task.assigned_to_name}} <!--{{::task.taskInfo.subject_person}}--></span>
          <span ng-if="!task.finished" class="m-b-sm">
            <span class="text-normal" ng-if="task.due_date">${Due by} {{::task.due_date | date: 'mediumDate' }}
          </span>
          <!-- Added in Completed Date when task is finished -->
          <span ng-if="task.finished" class="m-b-sm">
            <span class="text-normal" ng-if="task.closed_at">${Completed at} {{::task.closed_at | date: 'mediumDate' }}
            </span>
          </span>
        </div>
        <div class="status" ng-style="taskStatusStyle(task)">
          <div class="text-center text-uppercase" ng-if="!task.finished && task.isOverDue">Overdue</div>
          <div class="text-center text-uppercase" ng-if="!task.finished && !task.isOverDue">In Progress</div>
          <div class="text-center text-uppercase" ng-if="!task.finished && task.isOptional">Optional</div>
          <div class="text-center text-uppercase" ng-if="task.finished">Completed</div>
        </div>
      </div>
    </li>
  </ul>

In the above code, we have an ng-if on line 2 with the <li> tag that only shows tasks that are not completed (ng-if=!task.finished). However, we want to give the user the option of whether or not to show finished tasks. We've created an option schema boolean item called show_completed_items. If show_completed_items is checked as true, we want to take away that ng-if="!task.finished" so that ALL tasks are shown.

We've tried something like this, along with some other variations of that without any luck:

ng-if="!c.options.show_completed_items ? !task.finished : (!task.finished || task.finished)"

Thanks for any help!

hi Lex, thanks for the quick response, but that didn't work for me. — Dave, Jun 24 '19 at 18:57
Which is why I didn't add it as an answer. If it doesn't work for you there is something else going on that you are not showing us. — Lex, Jun 24 '19 at 18:58
Can't seems to see something wrong. @Lex's if-logic also seems correct. You can print out and debug the if by removing it and putting `{{ if-logic-here | json }|` inside the `
Another thing. What exactly "does not seems to work"? are the items filtered at all? or something else? its not clear — elpddev, Jun 24 '19 at 19:34

Pop-A-Stash · Answer 1 · 2019-06-24T19:52:11.560

This is a simplified demo showing that Lex's answer is actually correct: https://stackblitz.com/edit/angularjs-p7bqma?file=home/home.html

Template:

<label for="show-finished-checkbox">Show Finished</label>
<input id="show-finished-checkbox" type="checkbox" ng-model="$ctrl.showFinished">

<ul>
  <li ng-repeat="item in $ctrl.items" ng-if="!item.finished || $ctrl.showFinished">{{item.name}} / Finished: {{item.finished}}</li>
</ul>

Controller:

class HomeCtrl {
  constructor($scope) {
    'ngInject';

    this.items = [
      {
        name: "Item 1",
        finished: false
      },
      {
        name: "Item 2",
        finished: true
      },
      {
        name: "Item 3",
        finished: false
      }
    ]
  }
}

export default HomeCtrl;

Another approach is to use a custom filter. This is especially good for drying up your template and filtering on more complicated conditions:

Template:

<ul>
  <li ng-repeat="item in $ctrl.items | finished: $ctrl.showFinished" >{{item.name}} / Finished: {{item.finished}}</li>
</ul>

JS Code:

window.app.filter('finished', function() {
  return function(input, showFinished) {
    var out = [];
    angular.forEach(input, function(item) {

      if(!item.finished || showFinished) {
        out.push(item);
      }
    })
    return out;
  }
})

Angularjs: filtering ng-repeat with ng-if

1 Answers1