Как проверить, пусто ли 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'.Существуют различные значения: 'complete', 'pending', 'new'.

Я использую следующий код для отображения только «новых» задач.

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

Как отобразить ошибку пустых строк, когда нет доступных «новых» задач?

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>