Getting an issue in applying margin on the runtime using angular

Question

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.

Have you done a console.log or a breakpoint to test whether you're actually hitting the line of code that applies the margin? — Jacob Stamm
– Jacob Stamm, Commented Dec 9, 2021 at 16:21
Yes @JacobStamm I have added an alert just before the line that is applying the margin and I have also inspected the element and it was showing data-ng-style="{"margin-right":"50px"}" but on the view nothing was changed !!! — Ahmad Ayyaz
– Ahmad Ayyaz, Commented Dec 9, 2021 at 19:04
Since both the first and second returns return the exact same value, the only possible thing that's different between those two conditions is the value of $scope.addClassForShiftingAsset. Not a solution, but it is somewhere to look — Jacob Stamm
– Jacob Stamm, Commented Dec 9, 2021 at 19:07

Taimoor Bhatti · Accepted Answer · 2021-12-13 15:10:12Z

1

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

answered Dec 13, 2021 at 15:10

Taimoor Bhatti

609 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jacob Stamm Over a year ago

This doesn't explain the first return { "margin-right": "50px" } where your code snippet says it works fine. I suspect it wasn't actually working then.

Ahmad Ayyaz Over a year ago

@Taimoor you are right. this is just another way of doing it and if it is working like this then we can go with it.

Collectives™ on Stack Overflow

Getting an issue in applying margin on the runtime using angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related