Issue in applying margin using angular "data-ng-style"-CodePudding

There is <li> element in HTML that is calling a JS method "SiteAssetStyleForShiftedAsset" like this

<li  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.

CodePudding user response：

I don't see issue with the margin, but with the padding. You are having a colon within the quotes. return { "padding-right:": "15px" };

CodePudding user response：

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