I have an li element in which we are calling a method SiteAssetStyleForShiftedAsset like this:

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

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