使用 angular "data-ng-style" 应用保证金的问题

Question

HTML 中有 <li> 元素正在调用这样的 JS 方法“SiteAssetStyleForShiftedAsset”

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

在 JS 中，我们这样定义该方法：

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

在声明“if (isPPMJob == “FALSE”)”的外部 If 条件中，保证金应用得很好但是，当条件在“else if (isPPMJob == "TRUE")”中变为“TRUE”时，它不会应用保证金。但是，所有语句中的警报都有效。应用保证金的唯一问题。我还检查了该元素，它显示 data-ng-style="{"margin-right":"50px"}" 但在视图上没有任何改变。

Answer 1

我没有发现边距有问题，但填充有问题。您在引号中有一个冒号。 return { "padding-right:": "15px" };

Answer 2

我找到了解决该问题的方法。问题出在 HTML 我们使用 data-ng-style 的代码

data-ng-style="{{SiteAssetStyleForShiftedAsset()}}"

而不是这个我们必须像

那样使用它

data-ng-style="{'margin-right': SiteAssetStyleForShiftedAsset()}"

然后在 JS 控制器中只是 return 边距值，即“10px”、“50px”等

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

使用 angular "data-ng-style" 应用保证金的问题

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

html

javascript

css

angularjs