I have an li element in which we are calling a method SiteAssetStyleForShiftedAsset like this:
<li class="holder-white title-holder" data-ng-style="{{SiteAssetStyleForShiftedAsset()}}">
...
</li>
and from our javascript controller it being called like this:
function SiteAssetStyleForShiftedAsset() {
var isPPMJob = localStorage.getItem("IsPPMJob").toUpperCase();
var shiftingAsset = $scope.addClassForShiftingAsset;
if (isPPMJob == "FALSE") {
// it is working fine here. Margin is being applied correctly.
return { "margin-right": "50px" };
}
else if (isPPMJob == "TRUE") {
if (shiftingAsset.toUpperCase() == "TRUE")
{
//it is not working fine on this line. Margin is not being applied.
return { "margin-right": "50px" };
}
else {
return { "padding-right:": "15px" };
}
}
}
So it is working fine in the first if (isPPMJob == "FALSE") but in else if where we are checking shiftingAsset.toUpperCase() == "TRUE" that margin is not being applied.
Tried alerts on all conditions they are showing fine but margins are causing problems.
I found solution for that problem. The problem was with HTML code we were using data-ng-style like this
data-ng-style="{{SiteAssetStyleForShiftedAsset()}}"
instead of this we have to use it like
data-ng-style="{'margin-right': SiteAssetStyleForShiftedAsset()}"
Then in JS controller just return value of margin i.e. "10px" , "50px",etc
function SiteAssetStyleForShiftedAsset() {
var isPPMJob = localStorage.getItem("IsPPMJob").toUpperCase();
var shiftingAsset = $scope.addClassForShiftingAsset;
if (shiftingAsset == "false"){
//alert("abc");
return "10px";
//return { "padding-right:": "15px" };
}
else{
return "50px";
}
}