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行的ng-if标签上带有<li>标签，该标签仅显示未完成的任务（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

模板：

#  color =  box fill color
orgChart <- gvisOrgChart(staffInfo, 
              idvar = "employeeBox", 
              parentvar = "managerBox", 
              tipvar = "", 
              options=list(width=600, 
                           height=250,
                           allowHtml = TRUE,
                           size='large',
                           allowCollapse=TRUE,
                           color='#fbfbf0'
                           )
              )

控制器：

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

JS代码：

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

AngularJS：用ng-if过滤ng-repeat

1 个答案: