How to check if the ng-repeat in view is empty after certain conditions match

Question

• I have an object coming from the JSON.
• I use ng-repeat to display the object.
• In order to show certain rows-only, I use if condition and not filter.
• My question is, after I use if condition and if there is none of the rows matching the condition, I need to show an "empty" alert. How can I do that?

As of now my object is like this

[{
"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"
}]

As you can see the column 'task_status'. There are various values to it : 'complete', 'pending', 'new'.

I'm using the following code to display to the 'new' tasks alone.

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

How do I display an empty rows error when there is no 'new' tasks available?

Answer 1

You can write that logic in controller where you can check if all the task do not have new status and alert accordingly.

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>