具有多個條件表達式和多個樣式屬性的角度ng樣式

我想爲使用ng-style的條件組添加多個樣式屬性，因爲ng-class不適用於手風琴。具有多個條件表達式和多個樣式屬性的角度ng樣式

這裏是我怎麼想：

ng-style="{ border: ivrMessageForm.ivr_messagetitle.$error.required && !isFormValid ? '2px solid' : 'none' }"

這是工作的罰款。但也想添加border-color。

我嘗試這樣做：

ng-style="{ border: ivrMessageForm.ivr_messagetitle.$error.required && !isFormValid ? '2px solid' : 'none', border-color: ivrMessageForm.ivr_messagetitle.$error.required && !isFormValid ? 'red' : 'none'}"

，但它給了我解析錯誤。

我也試過這一個，但同樣的分析錯誤：

ng-style="ivrMessageForm.ivr_messagetitle.$error.required ? {border:'3px solid', border-color: 'red'} : {border:'none', border-color: 'none'}"

誰能幫助我如何添加使用NG式多重條件的多個樣式屬性。

來源

2016-07-22 Sony Khan

是指這樣的：http://stackoverflow.com/questions/29435883/ng屬性中的多重屬性 – chirag

你應該單引號添加到 '邊框顏色'

ng-style="{ border: ivrMessageForm.ivr_messagetitle.$error.required && !isFormValid ? '2px solid' : 'none', 'border-color': ivrMessageForm.ivr_messagetitle.$error.required && !isFormValid ? 'red' : 'none'}"

來源

2016-07-22 10:21:33 TTCC

單引號對於所有下一個屬性是否必需？ –

如果我想在$ error.pattern中添加相同的樣式，怎麼辦？ –

取決於屬性名稱。這不是一個angularjs知識，但JavaScript。如果屬性名稱包含多個單詞，則必須以駝峯格式或使用引號將其寫入。這意味着您還可以將'border-color'更改爲borderColor。 – TTCC

var myApp = angular.module('myApp',[]); 
 

 
function MyCtrl($scope) { 
 
\t $scope.styleobj = {}; 
 
    $scope.borderflag = true; 
 
    $scope.widthflag = true; 
 
    $scope.getStyle= function(){ 
 
    if($scope.borderflag){ 
 
\t \t \t \t $scope.styleobj.border = '2px solid'; 
 
    }if($scope.widthflag){ 
 
     \t \t $scope.styleobj.width = '100%'; 
 
     $scope.styleobj.font = 'italic bold 12px/30px Georgia, serif'; 
 
    } 
 
    console.log($scope.styleobj); 
 
    return $scope.styleobj; 
 
    } 
 
\t 
 
    $scope.name = 'Arindam Banerjee'; 
 
    
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script> 
 

 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
    Hello, {{name}}! 
 
    <p ng-style="getStyle()"> 
 
    Hello, {{name}}! 
 
    </p> 
 
</div>

來源

2016-07-22 11:34:33

具有多個條件表達式和多個樣式屬性的角度ng樣式

回答

相關問題