assign ng-class value according to array values angularjs

Question

my response is like this :

$scope.users = [{
name: 'joseph',
queue:[
{number:'111',status:'Paused'},
{number:'345',status:'Not In Use'},
{number:'342',status:'Not In Use'}],
}];

In my view I set the class as paused if the queue array in reponse contains status = Paused at any index. I think the way I'm doing it below is not the proper way as just in case the queue array contains more than 3 objects then my code won't assign the class properly. Here is my code :

<div ng-repeat="user in users>
    <span class="badges badges-lg" ng-class="{'paused': user.queue[0].status === 'Paused' ||  user.queue[1].status === 'Paused' ||  user.queue[2].status === 'Paused'}">111</span>
</div>

I want a solution such that apply the class paused only if the status corresponding to the "number":"111" in queue array is Paused. I mean instead of user.queue[0].status === 'Paused' || user.queue[1].status === 'Paused' || user.queue[2].status === 'Paused' I just want a single line of code to check status corresponding to the "number":"111" in queue array is Paused. How do I do it?

Ankit Agarwal · Accepted Answer · 2018-11-27 12:35:32Z

1

You can call a controller function in ng-class to dynamically check the condition and return the class you need:

var app = angular.module('myApp', []);
app.controller('MainCtrl', ['$scope', function($scope) {
  $scope.users = [{
    name: 'joseph',
    queue: [{
        number: '111',
        status: 'Paused'
      },
      {
        number: '345',
        status: 'Not In Use'
      },
      {
        number: '342',
        status: 'Not In Use'
      }
    ],
  }];
  $scope.checkPaused = function(user) {
    var isPaused = user.queue.find(({
      number
    }) => number === '111');
    if(isPaused){
      return 'paused'
    }
  }
}]);

.paused{
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MainCtrl">

  <div ng-repeat="user in users">
    <span class="badges badges-lg" ng-class="checkPaused(user)">111</span>
  </div>
</div>

answered Nov 27, 2018 at 12:35

Ankit Agarwal

30.8k5 gold badges41 silver badges63 bronze badges

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

5 Comments

node_man Over a year ago

I also want to check the status along with the number. I want it like this : if number = 111 and status = Paused then return pause.

node_man Over a year ago

hey I did it like this : user.queue.find(({number,status}) => number === '111' && status ==='Paused');

Ankit Agarwal Over a year ago

@pravinnavle that is fine. I just showed you the way. Tweak it as needed.

node_man Over a year ago

<span class="badges badges-lg" ng-class="checkPaused(user)" ng-show="user.queue[0].number == 111 || user.queue[1].number == 111 || user.queue[2].number == 111">111</span> I also have ng-show like this. It show's the <span>111</span> if the queue contains 111 at some index. I trie to do it as a function you mentioned in the answer but it's not working. How to do it?

node_man Over a year ago

please check stackoverflow.com/questions/53515313/…

Collectives™ on Stack Overflow

assign ng-class value according to array values angularjs

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related