Display element in angular based on condition in array of objects

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?

In general you'd probably use ng-if but there could be a different way depending on how you are using myObject.life_log? In an ng-repeat where you'll iterate through all of the objects in the collection? Some other way? — jbrown
– jbrown, Commented Jun 29, 2016 at 19:41

Timur Ridjanovic · Accepted Answer · 2016-06-29 19:41:47Z

2

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>

answered Jun 29, 2016 at 19:41

Timur Ridjanovic

1,0121 gold badge12 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

KingKongFrog Over a year ago

Awesome. I tried using a function but myobject is always empty. I'm guessing becasue the view is built before. How do I fix that?

Timur Ridjanovic Over a year ago

If you're making an AJAX request to get the data for myObject, then you'll need to tell angular to update the view. You can do that by putting your code inside a $timeout (that triggers the digest cycle that rerenders the view. $timeout calls $rootScope.$digest, which triggers the digest cycle). You'll have to inject the $timeout service in your controller and use it like this $timeout(function() { update myObject here });

AWolf Over a year ago

Also filtering for 'ALIVE' and comparing the length would work and I think that's easier to read. Please have a look at this fiddle. The reduce is also a nice way of detecting it. I think your code can be optimized a bit. Please have a look at the fiddle.

Rahul Arora · Accepted Answer · 2016-06-29 19:47:33Z

1

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>

answered Jun 29, 2016 at 19:47

Rahul Arora

4,5431 gold badge19 silver badges25 bronze badges

Comments

Pankaj Kumar · Accepted Answer · 2016-06-29 20:02:04Z

0

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>

answered Jun 29, 2016 at 20:02

Pankaj Kumar

8815 silver badges12 bronze badges

Comments

inoabrian · Accepted Answer · 2016-06-29 19:55:54Z

-1

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

edited Jun 29, 2016 at 19:55

answered Jun 29, 2016 at 19:50

inoabrian

3,8101 gold badge21 silver badges27 bronze badges

Collectives™ on Stack Overflow

Display element in angular based on condition in array of objects

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related