Develop Reference

How to add multiple conditions in ng-class using Angular.js

I need to add multiple conditions ng-class using Angular.js. I am explaining my code below.
<li ng-class="{'active':($root.stateName==='app.settings')}"><a ui-sref="app.settings">Settings</a></li>
Here I need to add another two conditions i.e-$root.stateName==='app.settings.area' and $root.stateName==='app.settings.area.manageState' with that existing conditions with OR condition.

Use an OR operator || in the evaluated expression:
<li ng-class="{'active':($root.stateName==='app.settings' || $root.stateName==='app.settings.area.manageState' )}">
<a ui-sref="app.settings">Settings</a>
</li>

I think this will also work
<li ng-class="{'active':($root.stateName==='app.settings' , $root.stateName==='app.settings.area.manageState' } ">
<a ui-sref="app.settings">Settings</a>
</li>

Try with
`<li ng-class="{'active':($root.stateName==='app.settings' || $root.stateName==='app.settings.area' || $root.stateName==='app.settings.area.manageState' || $root.stateName==='app.settings.area.manageCity' || $root.stateName==='app.settings.vechile' || || $root.stateName==='app.settings.vechile.category' || $root.stateName==='app.settings.vechile.manufacture' || $root.stateName==='app.settings.vechile.model')}">
<a ui-sref="app.settings.area.manageState">Settings</a>
</li>`

This is one of the blog which helps understanding all possible ways to use conditional ng-class
https://scotch.io/tutorials/the-many-ways-to-use-ngclass

# symbol in URL bar of the browser

I have this in my jsx, # is used to stop the link if user click on the a tag.
<a target={obj.handlerName === 'detail' ? `_blank` : ''} href={obj.handlerName === 'detail' ? `/products/${id}` : '#'} >{obj.name}</a>
but I will have the extra # if the handlerName is not equal to 'detail'
Any clue how to get rid of that?

What about using the includes() method?
<a target={obj.handlerName.includes('detail') ? `_blank` : ''} href={obj.handlerName === 'detail' ? `/products/${id}` : '#'} >{obj.name}</a>
Here's some useful reference:
https://www.w3schools.com/jsref/jsref_includes.asp
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String/includes

JXS if else class doesn't work

{item.status}
<div className="{item.status !== '' ? 'hide' : ''} pull-right">Content</div>
Why above jsx has no effect? My item.status value is string. But in my DOM I can't see hide class been added.

This is because you have wrapped your ternary operator in " so it is treated as string. Try this instead:
{item.status}
<div class={"pull-right "+(item.status !== '' ? 'hide' : '')}>Content</div>

Beside what #rahul-pratap-singh said, consider using nice, tiny package called classnames - link here so you can use it like:
import classes from 'classnames';
// later on
<div className={classes({
"pull-right": true,
"hide": item.status !== '',
})} />
I think it leads to much cleaner code than joining string.
Or at least use es6 string interpolation - link here
// instead of
"pull-right "+(item.status !== '' ? 'hide' : '')
// with string interpolation
`pull-right ${item.status.length ? '' : 'hide'}`;

ng-class not working. Where did I do wrong?

I know there are many problems here listed like this. but I can't pinpoint where I did wrong..
<li ng-repeat="item in type.sub | orderBy:y" ng-click="openpic($parent.$index, $index)" ng-class="{ 'active': $parent.$index + ':' + $index == current }">
we have $scope.current variable, and a nested menu with numbering id like 1:2, 1:3, 1:4, 2:1, 2:2, 2:3 and so on.
Goal is very simple. I need to make this <li> active, if the $parent.$index:$index is equal to $scope.current. ID is set whenever openpic($parent.$index, $index) triggered. We have li.active class in css.
So, can someone please show me, what's missing in that code?
TRY 1:
Tried:
<li ng-repeat="item in type.sub | orderBy:y" ng-click="openpic($parent.$index, $index)" ng-class="{ 'active': $parent.$index + ':' + $index == $parent.current }">
Still not working.
TRY 2
I have something like this:
ng-class="{{ $parent.$index + ':' + $index == $parent.current && 'active' || '' }}"
and it shows as ng-class="active" but class attribute did not updated.
TRY 3
ng-class="{{ $parent.$index + ':' + $index == $parent.current && 'highlight' || '' }}"
it shows ng-class='highlight", but class still shows class="ng-binding ng-scope"
TRY 4
ng-class="isActive($parent.$index,$index)"
It solves the problem, but it seems a little bit overkill for a simple switch function. Any more ideas?
TRY 5
As per major-mann code suggestion that works at TRY 4, I made these adjustment, and surprisingly, it works.
ng-class="$parent.$index + ':' + $index == $parent.current && 'active' || ''"
That one works. Removed all braces completely ????

First of all make {{$parent.$index:$index}} to make sure to get the right data (I just never met such a method to data access) ;
If it's ok, then try use:
ng-class="$parent.$index:$index === current ? 'active' : ''"
Or (best way) use function for this:
ng-class="someFn($parent.$index)"
$scope.someFn = function(index){
//index, index:index, index[n] or something else;
return index === $scope.current ? 'active' : '';
};
Update:
If You want get access to parent ng-repeat, better use
<... ng-repeat="(index1, data1) in firstData">
<... ng-repeat="(index2, data2) in secondData">
<... ng-something="index1 operator index2 or function(index1, index2)">
I hope, it will help;

As pointed to in the comments, rather a non-answer, but usually it is best practice to try to keep code (even simple ternaries) inside the JavaScript blocks rather than inside the HTML. This generally makes debugging any issues you may be having infinitely easier to deal with.
So, for example, you could change your HTML to something like:
<li ng-repeat="..." ng-click="..." ng-class="isActive($parent.$index, $index)">
And in your controller, you could add something like:
$scope.menu= function isActive(pidx, idx) {
return {
active: pidx + ':' + idx === $scope.current
};
};
To achieve your desired result.
If you take this a step further, you will probably realize that it is even better to do something like
$scope.cls.menu = function(pidx, idx) {
return {
active: pidx + ':' + idx === $scope.current,
any: 'other',
dynamic: 'classes',
you: 'need'
};
}
And call the function appropriately in the view.

AngularJS - HTML data binding UI issue

I am binding following in my HTML.
<div>{{user.address[0].addressline1}}, {{user.address[0].addressline2}}, {{user.address[0].city}}, {{user.address[0].state}}, {{user.address[0].zipcode}}</div>
The issue is if addressline1 is null, it unnecessarily shows the , at first.
And also some other fields can be null
So How to display comma only if the value is not null?

Or as a matter of style, you can use a turnery operator to check for the value then format it
{{ !!user.address[0].addressline1 ? user.address[0].addressline1 + ', ' : ''}}
This could be made as filter to be more intuitive
angular.module('myapp', []).filter('trailIfTrue', [function(){
return function(val, trail){
return !!val ? val + trail : '';
}
}]);
usage:
{{ user.address[0].addressline1 | trailIfTrue:',' }}
here is a plunker

User separate span and ng-show so the span will be shown only if user.address[0].addressline1 is not null
<span ng-show="user.address[0].addressline1">{{user.address[0].addressline1}},</span>
<span ng-show="user.address[0].addressline2">{{user.address[0]. addressline2}},</span>
<span ng-show="user.address[0].city">{{user.address[0].city}},</span>
//...
You can use any expression into ng-show Eg:
user.address[0].addressline1 != null
myObj.myIntAttr > 0 && < 10
myObj.myBoolAttr == false
//...