具有多个条件表达式和多个样式属性的角度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样式

回答

相关问题