Hay un elemento <li>
en HTML que llama a un método JS "SiteAssetStyleForShiftedAsset" como este
<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);">
Dentro de JS definimos ese método así:
$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" }; } } }
En la condición If externa que dice " if (isPPMJob == "FALSE") ", el margen se aplica perfectamente bien. Pero cuando la condición se vuelve " VERDADERA " en " else if (isPPMJob == "TRUE") ", no se aplica el margen. Sin embargo, las alertas en todas las declaraciones están funcionando. El único problema con la aplicación de margen. También inspeccioné el elemento y mostraba data-ng-style="{"margin-right":"50px"}" pero en la vista no se cambió nada.
Encontré solución para ese problema. El problema era con el código HTML que estábamos usando estilo data-ng como este
data-ng-style="{{SiteAssetStyleForShiftedAsset()}}"
en lugar de esto tenemos que usarlo como
data-ng-style="{'margin-right': SiteAssetStyleForShiftedAsset()}"
Luego, en el controlador JS, simplemente devuelva el valor del margen, es decir, "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"; } }
No veo problema con el margen, sino con el relleno. Estás teniendo dos puntos dentro de las comillas. volver { "relleno derecho:": "15px" };