Assign css class using ng-class in angular js
3
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}"
javascript css arrays angularjs json
asked Nov 19 '18 at 6:55
pravin navlepravin navle
503418
add a comment |
3
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}"
javascript css arrays angularjs json
asked Nov 19 '18 at 6:55
pravin navlepravin navle
503418
Don't you have to useng-repeatals toqueue???
– לבני מלכה
Nov 19 '18 at 6:58
but I think that will also repeat the <span>
– pravin navle
Nov 19 '18 at 7:01
@pravinnavle check the updated answer
– Ankit Agarwal
Nov 19 '18 at 7:13
add a comment |
3
3
3
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}"
javascript css arrays angularjs json
asked Nov 19 '18 at 6:55
pravin navlepravin navle
503418
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}"
javascript css arrays angularjs json
javascript css arrays angularjs json
asked Nov 19 '18 at 6:55
pravin navlepravin navle
503418
asked Nov 19 '18 at 6:55
pravin navlepravin navle
503418
edited Nov 19 '18 at 7:11
pravin navle
asked Nov 19 '18 at 6:55
pravin navlepravin navle
503418
asked Nov 19 '18 at 6:55
pravin navlepravin navle
503418
asked Nov 19 '18 at 6:55
pravin navlepravin navle
503418
503418
Don't you have to useng-repeatals toqueue???
– לבני מלכה
Nov 19 '18 at 6:58
but I think that will also repeat the <span>
– pravin navle
Nov 19 '18 at 7:01
@pravinnavle check the updated answer
– Ankit Agarwal
Nov 19 '18 at 7:13
add a comment |
Don't you have to useng-repeatals toqueue???
– לבני מלכה
Nov 19 '18 at 6:58
but I think that will also repeat the <span>
– pravin navle
Nov 19 '18 at 7:01
@pravinnavle check the updated answer
– Ankit Agarwal
Nov 19 '18 at 7:13
Don't you have to use
ng-repeat als to queue???– לבני מלכה
Nov 19 '18 at 6:58
Don't you have to use
ng-repeat als to queue???– לבני מלכה
Nov 19 '18 at 6:58
but I think that will also repeat the <span>
– pravin navle
Nov 19 '18 at 7:01
but I think that will also repeat the <span>
– pravin navle
Nov 19 '18 at 7:01
@pravinnavle check the updated answer
– Ankit Agarwal
Nov 19 '18 at 7:13
@pravinnavle check the updated answer
– Ankit Agarwal
Nov 19 '18 at 7:13
add a comment |
3 Answers
3
active
oldest
votes
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>answered Nov 19 '18 at 7:28
Shiv Kumar BaghelShiv Kumar Baghel
1,3663820
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
– pravin navle
Nov 22 '18 at 6:32
i would suggest to include & use lodash lodash.com for sorting searching etc.
– Shiv Kumar Baghel
Nov 22 '18 at 6:35
can you help me with this
– pravin navle
Dec 10 '18 at 7:13
1
@pravinnavle updated my answer withlodashusing_.filtermethod. so use_.filter(array, { 'number': '111' } )insteadfindObjectByKeymethod.
– Shiv Kumar Baghel
Dec 11 '18 at 2:34
thanks you so much. this is really helpful to optimise the code
– pravin navle
Dec 11 '18 at 3:00
|
show 1 more comment
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 '18 at 7:07
לבני מלכהלבני מלכה
10.1k1826
add a comment |
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>answered Nov 19 '18 at 7:03
Ankit AgarwalAnkit Agarwal
23.8k52044
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}"
– pravin navle
Nov 19 '18 at 7:07
@pravinnavle ok I got you. Check the updated answer
– Ankit Agarwal
Nov 19 '18 at 7:13
@pravinnavle glad to help. You can tick mark the answer if it was helpful to you :)
– Ankit Agarwal
Nov 19 '18 at 7:57
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53369676%2fassign-css-class-using-ng-class-in-angular-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
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>answered Nov 19 '18 at 7:28
Shiv Kumar BaghelShiv Kumar Baghel
1,3663820
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
– pravin navle
Nov 22 '18 at 6:32
i would suggest to include & use lodash lodash.com for sorting searching etc.
– Shiv Kumar Baghel
Nov 22 '18 at 6:35
can you help me with this
– pravin navle
Dec 10 '18 at 7:13
1
@pravinnavle updated my answer withlodashusing_.filtermethod. so use_.filter(array, { 'number': '111' } )insteadfindObjectByKeymethod.
– Shiv Kumar Baghel
Dec 11 '18 at 2:34
thanks you so much. this is really helpful to optimise the code
– pravin navle
Dec 11 '18 at 3:00
|
show 1 more comment
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>answered Nov 19 '18 at 7:28
Shiv Kumar BaghelShiv Kumar Baghel
1,3663820
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
– pravin navle
Nov 22 '18 at 6:32
i would suggest to include & use lodash lodash.com for sorting searching etc.
– Shiv Kumar Baghel
Nov 22 '18 at 6:35
can you help me with this
– pravin navle
Dec 10 '18 at 7:13
1
@pravinnavle updated my answer withlodashusing_.filtermethod. so use_.filter(array, { 'number': '111' } )insteadfindObjectByKeymethod.
– Shiv Kumar Baghel
Dec 11 '18 at 2:34
thanks you so much. this is really helpful to optimise the code
– pravin navle
Dec 11 '18 at 3:00
|
show 1 more comment
1
1
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>answered Nov 19 '18 at 7:28
Shiv Kumar BaghelShiv Kumar Baghel
1,3663820
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>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>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>answered Nov 19 '18 at 7:28
Shiv Kumar BaghelShiv Kumar Baghel
1,3663820
edited Dec 11 '18 at 2:33
answered Nov 19 '18 at 7:28
Shiv Kumar BaghelShiv Kumar Baghel
1,3663820
answered Nov 19 '18 at 7:28
Shiv Kumar BaghelShiv Kumar Baghel
1,3663820
answered Nov 19 '18 at 7:28
Shiv Kumar BaghelShiv Kumar Baghel
1,3663820
1,3663820
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
– pravin navle
Nov 22 '18 at 6:32
i would suggest to include & use lodash lodash.com for sorting searching etc.
– Shiv Kumar Baghel
Nov 22 '18 at 6:35
can you help me with this
– pravin navle
Dec 10 '18 at 7:13
1
@pravinnavle updated my answer withlodashusing_.filtermethod. so use_.filter(array, { 'number': '111' } )insteadfindObjectByKeymethod.
– Shiv Kumar Baghel
Dec 11 '18 at 2:34
thanks you so much. this is really helpful to optimise the code
– pravin navle
Dec 11 '18 at 3:00
|
show 1 more comment
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
– pravin navle
Nov 22 '18 at 6:32
i would suggest to include & use lodash lodash.com for sorting searching etc.
– Shiv Kumar Baghel
Nov 22 '18 at 6:35
can you help me with this
– pravin navle
Dec 10 '18 at 7:13
1
@pravinnavle updated my answer withlodashusing_.filtermethod. so use_.filter(array, { 'number': '111' } )insteadfindObjectByKeymethod.
– Shiv Kumar Baghel
Dec 11 '18 at 2:34
thanks you so much. this is really helpful to optimise the code
– pravin navle
Dec 11 '18 at 3:00
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
– pravin navle
Nov 22 '18 at 6:32
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
– pravin navle
Nov 22 '18 at 6:32
i would suggest to include & use lodash lodash.com for sorting searching etc.
– Shiv Kumar Baghel
Nov 22 '18 at 6:35
i would suggest to include & use lodash lodash.com for sorting searching etc.
– Shiv Kumar Baghel
Nov 22 '18 at 6:35
can you help me with this
– pravin navle
Dec 10 '18 at 7:13
can you help me with this
– pravin navle
Dec 10 '18 at 7:13
1
1
@pravinnavle updated my answer with
lodash using _.filter method. so use _.filter(array, { 'number': '111' } ) instead findObjectByKey method.– Shiv Kumar Baghel
Dec 11 '18 at 2:34
@pravinnavle updated my answer with
lodash using _.filter method. so use _.filter(array, { 'number': '111' } ) instead findObjectByKey method.– Shiv Kumar Baghel
Dec 11 '18 at 2:34
thanks you so much. this is really helpful to optimise the code
– pravin navle
Dec 11 '18 at 3:00
thanks you so much. this is really helpful to optimise the code
– pravin navle
Dec 11 '18 at 3:00
|
show 1 more comment
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 '18 at 7:07
לבני מלכהלבני מלכה
10.1k1826
add a comment |
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 '18 at 7:07
לבני מלכהלבני מלכה
10.1k1826
add a comment |
1
1
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 '18 at 7:07
לבני מלכהלבני מלכה
10.1k1826
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 '18 at 7:07
לבני מלכהלבני מלכה
10.1k1826
answered Nov 19 '18 at 7:07
לבני מלכהלבני מלכה
10.1k1826
answered Nov 19 '18 at 7:07
לבני מלכהלבני מלכה
10.1k1826
answered Nov 19 '18 at 7:07
לבני מלכהלבני מלכה
10.1k1826
10.1k1826
add a comment |
add a comment |
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>answered Nov 19 '18 at 7:03
Ankit AgarwalAnkit Agarwal
23.8k52044
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}"
– pravin navle
Nov 19 '18 at 7:07
@pravinnavle ok I got you. Check the updated answer
– Ankit Agarwal
Nov 19 '18 at 7:13
@pravinnavle glad to help. You can tick mark the answer if it was helpful to you :)
– Ankit Agarwal
Nov 19 '18 at 7:57
add a comment |
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>answered Nov 19 '18 at 7:03
Ankit AgarwalAnkit Agarwal
23.8k52044
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}"
– pravin navle
Nov 19 '18 at 7:07
@pravinnavle ok I got you. Check the updated answer
– Ankit Agarwal
Nov 19 '18 at 7:13
@pravinnavle glad to help. You can tick mark the answer if it was helpful to you :)
– Ankit Agarwal
Nov 19 '18 at 7:57
add a comment |
1
1
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>answered Nov 19 '18 at 7:03
Ankit AgarwalAnkit Agarwal
23.8k52044
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>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>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>answered Nov 19 '18 at 7:03
Ankit AgarwalAnkit Agarwal
23.8k52044
edited Nov 19 '18 at 7:12
answered Nov 19 '18 at 7:03
Ankit AgarwalAnkit Agarwal
23.8k52044
answered Nov 19 '18 at 7:03
Ankit AgarwalAnkit Agarwal
23.8k52044
answered Nov 19 '18 at 7:03
Ankit AgarwalAnkit Agarwal
23.8k52044
23.8k52044
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}"
– pravin navle
Nov 19 '18 at 7:07
@pravinnavle ok I got you. Check the updated answer
– Ankit Agarwal
Nov 19 '18 at 7:13
@pravinnavle glad to help. You can tick mark the answer if it was helpful to you :)
– Ankit Agarwal
Nov 19 '18 at 7:57
add a comment |
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}"
– pravin navle
Nov 19 '18 at 7:07
@pravinnavle ok I got you. Check the updated answer
– Ankit Agarwal
Nov 19 '18 at 7:13
@pravinnavle glad to help. You can tick mark the answer if it was helpful to you :)
– Ankit Agarwal
Nov 19 '18 at 7:57
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}"
– pravin navle
Nov 19 '18 at 7:07
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}"
– pravin navle
Nov 19 '18 at 7:07
@pravinnavle ok I got you. Check the updated answer
– Ankit Agarwal
Nov 19 '18 at 7:13
@pravinnavle ok I got you. Check the updated answer
– Ankit Agarwal
Nov 19 '18 at 7:13
@pravinnavle glad to help. You can tick mark the answer if it was helpful to you :)
– Ankit Agarwal
Nov 19 '18 at 7:57
@pravinnavle glad to help. You can tick mark the answer if it was helpful to you :)
– Ankit Agarwal
Nov 19 '18 at 7:57
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53369676%2fassign-css-class-using-ng-class-in-angular-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Don't you have to use
ng-repeatals toqueue???– לבני מלכה
Nov 19 '18 at 6:58
but I think that will also repeat the <span>
– pravin navle
Nov 19 '18 at 7:01
@pravinnavle check the updated answer
– Ankit Agarwal
Nov 19 '18 at 7:13