There is <li> element in HTML that is calling a JS method "SiteAssetStyleForShiftedAsset" like this
<li class="holder-white title-holder" data-ng-style="{{SiteAssetStyleForShiftedAsset()}}" data-ng-click="getSiteAssetDetailByAssetId(asset.id,asset.assetId,asset.jobPlantId, asset.siteAssetId, asset.uniqueKey, asset.plantId,asset.siteAssetGuidId);">
Inside JS we defined that method like this:
$scope.SiteAssetStyleForShiftedAsset = SiteAssetStyleForShiftedAsset;
function SiteAssetStyleForShiftedAsset() {
var isPPMJob = localStorage.getItem("IsPPMJob").toUpperCase();
var shiftingAsset = $scope.addClassForShiftingAsset;
if (isPPMJob == "FALSE") {
return { "margin-right": "50px" };
}
else if (isPPMJob == "TRUE") {
if (shiftingAsset == true || shiftingAsset == "true")
{
return { "margin-right": "50px" };
}
else {
return { "padding-right:": "15px" };
}
}
}
In outer If condition that states "if (isPPMJob == "FALSE")" margin is applying perfectly fine But when condition become "TRUE" in "else if (isPPMJob == "TRUE")" it isn't applying margin. However alerts in all statements are working. Only problem with applying margin. I have also inspected the element and it was showing data-ng-style="{"margin-right":"50px"}" but on the view nothing was changed.
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";
}
}
I don't see issue with the margin, but with the padding. You are having a colon within the quotes. return { "padding-right:": "15px" };