CODEWITHSUNDEEP
htmlcssangularjs
Sony Khan
Sony Khan

Reputation: 1504

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

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.

Upvotes: 2

Views: 22692

Answers (2)

Arindam Banerjee
Arindam Banerjee

Reputation: 119

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>

##

Upvotes: 1

TTCC
TTCC

Reputation: 1055

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'}"

Upvotes: 7

Related Questions