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: stackoverflow.com/questions/29435883/…

chirag
– chirag

2016-07-22 10:33:00 +00:00
Commented Jul 22, 2016 at 10:33 — chirag
– chirag, Commented Jul 22, 2016 at 10:33

TTCC · Accepted Answer · 2016-07-22 10:21:33Z

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, 2016 at 10:21

TTCC

1,0556 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sony Khan Over a year ago

single quote is necessary for all next attributes?

Sony Khan Over a year ago

what about if i want to add same style on $error.pattern?

TTCC Over a year ago

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.

Sony Khan Over a year ago

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?

Arindam Banerjee · Accepted Answer · 2016-07-22 11:34:33Z

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>

##

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related