angularjs - 在某些条件匹配后如何检查视图中的 ng-repeat 是否为空

Question

• 我有一个来自 JSON 的对象。
• 我使用 ng-repeat 来显示对象。
• 为了只显示某些行，我使用 if 条件而不是过滤器。
• 我的问题是，在我使用 if 条件之后，如果没有符合条件的行，我需要显示“空”警报。我怎样才能做到这一点？

截至目前我的对象是这样的

[{
"task_id":3773,
"task_name":"King of Avalon: Dragon War",
"task_status":"pending"
},
{
"task_id":2208,
"task_name":"Final Fantasy XV",
"task_status":"pending"
},
{
"task_id":3760,
"task_name":"King of Avalon: Dragon War",
"task_status":"pending"
},
{
"task_id":2746,
"task_name":"Postmates",
"task_status":"complete"
}]

如您所见，“task_status”列。它有各种值：“完成”、“待定”、“新”。

我正在使用以下代码单独显示“新”任务。

<div ng-repeat="(key, task) in tasksObj" ng-if="task.task_status == 'new'>
    <p>{{task.task_id}}</p>
</div>

当没有可用的“新”任务时，如何显示空行错误？

标签： angularjs

Answer 1

您可以在控制器中编写该逻辑，您可以在其中检查所有任务是否没有new状态并相应地发出警报。

angular.module('app', [])
  .controller('MainCtrl', ['$scope', function($scope) {
    $scope.tasksObj = [{
      "task_id": 3773,
      "task_name": "King of Avalon: Dragon War",
      "task_status": "pending"
    }, {
      "task_id": 2208,
      "task_name": "Final Fantasy XV",
      "task_status": "pending"
    }, {
      "task_id": 3760,
      "task_name": "King of Avalon: Dragon War",
      "task_status": "pending"
    }, {
      "task_id": 2746,
      "task_name": "Postmates",
      "task_status": "complete"
    }];
    let nonNewStatus = $scope.tasksObj.every(({task_status}) => task_status!=='new');
    if(nonNewStatus) {
      alert('There is no any task with status: new');
    }
  }])

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app" ng-controller="MainCtrl">
  <div ng-repeat="(key, task) in tasksObj" ng-if="task.task_status =='new'">
    <p>{{task.task_id}}</p>
  </div>
</div>