CODEWITHSUNDEEP
javascriptcssarraysangularjsjson
node_man
node_man

Reputation: 1449

Assign css class using ng-class in angular js

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}"

Upvotes: 3

Views: 315

Answers (3)

Shiv Kumar Baghel
Shiv Kumar Baghel

Reputation: 2480

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>

Upvotes: 1

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

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>

Upvotes: 1

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

Reputation: 16251

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

Upvotes: 1

Related Questions