Angular ng-style with a multiple conditional expression and multiple style attributes

Question

I want to add multiple style attribute for accordion group using ng-style with conditions as ng-class is not working with accordion.

Here is how i am trying:

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

this is working fine. but want to add border-color too.

I tried this:

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

but it gives me parse error.

i also tried this one but same parse error:

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

can anyone help me how to add multiple style attributes with multiple conditions using ng-style.

refer this: http://stackoverflow.com/questions/29435883/multiple-attributes-in-ng-style — chirag, Jul 22 '16 at 10:33

score 7 · Accepted Answer · answered Jul 22 '16 at 10:21

7

You should add single quotes to 'border-color'

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

answered Jul 22 '16 at 10:21

TTCC

935
5
12

single quote is necessary for all next attributes? – Sony Khan Jul 22 '16 at 10:42
what about if i want to add same style on $error.pattern? – Sony Khan Jul 22 '16 at 11:11
Depends on the attribute name. This is not a angularjs knowledge but javascript. If the property name contains more than one word, you must write it in hump format or or use quotation marks.That means you can also change 'border-color' to borderColor. – TTCC Jul 22 '16 at 11:31
can you optimize this. Let suppose define style in js file as $scope.css = { border: '3px solid', 'border-color': 'red' } How can i pass this css variable in ng-style with condition? – Sony Khan Jul 22 '16 at 13:05

score 1 · Answer 2 · answered Jul 22 '16 at 11:34

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

function MyCtrl($scope) {
 $scope.styleobj = {};
  $scope.borderflag = true;
  $scope.widthflag = true;
  $scope.getStyle= function(){  
     if($scope.borderflag){
    $scope.styleobj.border = '2px solid';
     }if($scope.widthflag){
       $scope.styleobj.width = '100%';
        $scope.styleobj.font = 'italic bold 12px/30px Georgia, serif';
     }
     console.log($scope.styleobj);
     return $scope.styleobj;
  }
 
    $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>

##

Angular ng-style with a multiple conditional expression and multiple style attributes

2 Answers2