使用角度“data-ng-style”应用边距的问题答案

【问题标题】：Issue in applying margin using angular "data-ng-style"使用角度“data-ng-style”应用边距的问题
【发布时间】：2022-01-15 07:16:40
【问题描述】：

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"}" 但在视图上没有任何改变。

【问题讨论】：

标签： javascript html css angularjs

【解决方案1】：

我看不到边距有问题，但填充有问题。您在引号中有一个冒号。返回 { "padding-right:": "15px" };

【讨论】：

【解决方案2】：

我找到了解决该问题的方法。问题在于我们使用这样的 data-ng 样式的 HTML 代码

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

我们必须像这样使用它

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

然后在 JS 控制器中只返回边距值，即“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";
        }
    }

【讨论】：