Angularjs：使用 ng-if 过滤 ng-repeat

Question

我们的团队正在 ServiceNow 中构建一个小部件，用于为用户显示任务图块。到目前为止，我们的代码如下所示：

  <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>

在上面的代码中，我们在第 2 行有一个带有<li> 标签的ng-if，它只显示未完成的任务（ng-if=!task.finished）。但是，我们希望让用户选择是否显示已完成的任务。我们创建了一个名为show_completed_items 的选项架构布尔项。如果 show_completed_items 被检查为 true，我们想要删除 ng-if="!task.finished" 以便显示所有任务。

我们已经尝试过类似的方法，以及其他一些变体，但没有任何运气：

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

感谢您的帮助！

Answer 1

这是一个简化的演示，表明 Lex 的答案实际上是正确的：https://stackblitz.com/edit/angularjs-p7bqma?file=home/home.html

模板：

<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>

控制器：

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;

另一种方法是使用自定义过滤器。这对于干燥模板和过滤更复杂的条件特别有用：

模板：

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

JS代码：

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;
  }
})