Display element in angular based on condition in array of objects - angularjs

Question

I have the following element.
<div> My element</div>
and the following object:
$scope.myObject = {'life_log' : [{status: 'ALIVE'},{status: 'DEAD'}]}
How can I display the element ONLY if all status is ALIVE.
I know how to use ng-show on a variable but what about a condition like this?

Answer 1

You'll have to create a function that loops through your array and checks if all the statuses are 'ALIVE'. Or just use a reduce method on the array:
$scope.allStatusesAreAlive = $scope.myObject.life_log.reduce(function(a, b) {
if (a === false) return false;
if (b.status === 'DEAD') return false;
return true;
}, true);
Then you can display your element if $scope.allStatusesAreAlive is true:
<div ng-if="allStatusesAreAlive"> My element</div>

Answer 2

You can do something like this
angular.forEach($scope.myObject.life_log, function(item){
if(item.status !=='ALIVE'){
$scope.isAlive = false;
break;
}else{
$scope.isAlive = true;
}
});
then in your html
<div data-ng-if="isAlive">My element</div>

Answer 3

Check the following link
https://plnkr.co/edit/ermeKk1dBX8D54pL7vHQ?p=preview
angular code:
$scope.myObject = {'life_log' : [{status: 'ALIVE'},{status: 'DEAD'}]}
$scope.val=true;
for(i=0;i<$scope.myObject.life_log.length;i++){
if($scope.myObject.life_log[i].status != "ALIVE")
$scope.val=false;
}
html code:
<div ng-show="val">My element</div>

Answer 4

// This is here to make it configurable
$scope.keys = Object.keys($scope.myObject);
// In this case you have the "life_log" key
$scope.keys.forEach(k => {
$scope.myObject[k].forEach((d) => {
// our object here is myObject["life_log"];
// obj is a temp array to check the amount of statuses that are dead
var obj = [];
d["allAlive"] = d.status.forEach( s =>{
if(s == 'DEAD'){
obj.push("Dead");
}
});
if(obj.length > 0){
d.allAlive = false
}else{
d.allAlive = true;
}
});
});
<div ng-if="myObject[o].allAlive>
ALL ALIVE
</div>