Assign css class using ng-class in angular js

Question

I'm using angularjs and I have data like this :

$scope.users = [{
name: "Pratik"
queue: [{number: "199"},{number: "111"}],
status: "OK"
}]

My view :

   .available{
    background-color: #00226f;
    color: #f8f8f8;
    }

 <div class="col-xs-12 col-sm-3" ng-repeat="user in users">
    <span ng-class="{'available': user.queue[0].number == 111}" class="badges ">111</span>
</div>

My problem is that I want to assign the class "available" if the queue array in users contains the number "111" at any index. In the users array the number:"111" may appear at any index so in the view I can't always use user.queue[1].number == 111 or user.queue[1].number == 111 to assign the class. I want a solution which will check if the queue array contains number:"111" and assign the class of available accordingly. I tried to do it like this : ng-class="{'available': user.queue[i].number == 111}" but it's not working. How do I do it?

This my current workaround to apply the class:

ng-class="{'available': user.queue[0].number == 111 ||  user.queue[1].number == 111}"

Don't you have to use ng-repeat als to queue???

לבני מלכה
– לבני מלכה

2018-11-19 06:58:27 +00:00
Commented Nov 19, 2018 at 6:58 — לבני מלכה
– לבני מלכה, Commented Nov 19, 2018 at 6:58
but I think that will also repeat the <span>

node_man
– node_man

2018-11-19 07:01:04 +00:00
Commented Nov 19, 2018 at 7:01 — node_man
– node_man, Commented Nov 19, 2018 at 7:01
@pravinnavle check the updated answer

Ankit Agarwal
– Ankit Agarwal

2018-11-19 07:13:45 +00:00
Commented Nov 19, 2018 at 7:13 — Ankit Agarwal
– Ankit Agarwal, Commented Nov 19, 2018 at 7:13

Shiv Kumar Baghel · Accepted Answer · 2018-12-11 02:33:31Z

1

try below code snippet

can achieve by using lodash js also using _.filter

_.filter(array, { 'number': '111' } )

Ref: https://lodash.com/docs/4.17.11#find

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {

$scope.findObjectByKey = function(array, key, value) {
    for (var i = 0; i < array.length; i++) {
        if (array[i][key] === value) {
            return array[i];
        }
    }
    return null;
};

$scope.users = [{
    name: "Pratik",
    queue: [{number: "199"},{number: "666"}],
    status: "OK"
  },
  {
    name: "Pratik 2",
    queue: [{number: "111"},{number: "555"}],
    status: "OK 2"
  },
  {
    name: "Pratik 3",
    queue: [{number: "999"},{number: "888"}],
    status: "OK 3"
  }
  ];
  
  $scope.searcInArray =  function(array){
   // var obj = $scope.findObjectByKey(array, 'number', '111');
   
   // using loadsh
   var obj = _.filter(array, { 'number': '111' }  );
   return obj.length > 0;
  };



}

.available{
   background-color: #00226f;
   color: #f8f8f8;
}

<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>


</head>
<body>
<div ng-app="myApp" ng-controller="MyCtrl">
  
 <div class="col-xs-12 col-sm-3" ng-repeat="user in users">
    <span ng-class="{'available' : searcInArray(user.queue)}" class="badges ">111</span>
 </div>

</div>
</body>
</html>

edited Dec 11, 2018 at 2:33

answered Nov 19, 2018 at 7:28

Shiv Kumar Baghel

2,4906 gold badges20 silver badges36 bronze badges

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

7 Comments

node_man Over a year ago

can you tell me a similar function to sort data if there's no array. I mean I want a functionality will let me sort values which are not array like this ('name' , 'Pratik') instead of (array, 'number', '111'). So that if the name is Pratik then I'll set some other class to that element

Shiv Kumar Baghel Over a year ago

i would suggest to include & use lodash lodash.com for sorting searching etc.

node_man Over a year ago

can you help me with this

Shiv Kumar Baghel Over a year ago

@pravinnavle updated my answer with lodash using _.filter method. so use _.filter(array, { 'number': '111' } ) instead findObjectByKey method.

node_man Over a year ago

thanks you so much. this is really helpful to optimise the code

|

לבני מלכה · Accepted Answer · 2018-11-19 07:07:19Z

1

You have to add use ng-repeat to loop all queue and find how has item.number == '111'

<div class="col-xs-12 col-sm-3" ng-repeat="user in users">
  <div ng-repeat="item in user.queue">
     <span ng-class="{'available': item.number == '111'}" class="badges ">111</span>
  </div>
</div>

NOTE!

if you want show only the item.number == '111' you can use ng-hide/show

answered Nov 19, 2018 at 7:07

לבני מלכה

16.3k2 gold badges26 silver badges48 bronze badges

Comments

Ankit Agarwal · Accepted Answer · 2018-11-19 07:12:59Z

1

To check that condition where 111 appears at any index the easy fix could be to call a function that will check that property in the array and return true or false based on the condition. Something like below:

var app = angular.module('myApp', []);
app.controller('MainCtrl', ['$scope', function($scope){
$scope.users = [{
    name: "Pratik",
    queue: [{
      number: "111"
    }, {
      number: "119"
    }],
    status: "OK"
  },
  {
    name: "Pratik123",
    queue: [{
      number: "199"
    }, {
      number: "185"
    }],
    status: "OK"
  }];
  $scope.checkQueue = function(queue){
    return queue.find(({number})=>number === '111');
  }
}]);

.available {
  background-color: #00226f;
  color: #f8f8f8;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MainCtrl">
  <div class="col-xs-12 col-sm-3" ng-repeat="user in users">
    <span ng-class="{'available': checkQueue(user.queue)}" class="badges ">{{user.name}}</span>
  </div>
</div>

edited Nov 19, 2018 at 7:12

answered Nov 19, 2018 at 7:03

Ankit Agarwal

30.8k5 gold badges41 silver badges63 bronze badges

2 Comments

node_man Over a year ago

it's working fine the way I have implemented it. This is my current workaround ng-class="{'available111': user.queue[0].number == 111 || user.queue[1].number == 111}"

Ankit Agarwal Over a year ago

@pravinnavle glad to help. You can tick mark the answer if it was helpful to you :)

Collectives™ on Stack Overflow

Assign css class using ng-class in angular js

3 Answers 3

7 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related