Using Angular's ng-style directive to apply various styles based on multiple conditions and attributes

Question

Using Angular's ng-style directive to apply various styles based on multiple conditions and attributes

I am attempting to apply multiple styles to an accordion group using the ng-style directive since ng-class is not compatible with accordions.

Here is my current implementation:

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

This is working as expected, but I also need to include a border-color.

I attempted the following:

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

However, this results in a parse error.

I also tried the following approach with the same parse error:

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

Could anyone provide guidance on how to apply multiple style attributes with various conditions using ng-style?

html css angularjs

Answer 1

Answer №1

Adding single quotes around 'border-color' is recommended.

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

Answer 2

Adding single quotes around 'border-color' is recommended.

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

Answer 3

Answer №2

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>

##

Answer 4

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>

##

Using Angular's ng-style directive to apply various styles based on multiple conditions and attributes

Answer №1

Answer №2

Similar questions

Is there a way to prevent the use of angular.reloadWithDebugInfo() in the browser console?

Issue with Bootstrap tab display of content

Stylish CSS Effects on Hover

Problem with keyframe animations in Internet Explorer 10

Looking to streamline your design? Find out how to translate multiple elements to the same position seamlessly

Tips for preventing Razor from interpreting special characters as HTML code

Having difficulty fully modifying the jQuery class

Is it possible to leverage specific client-side Javascript APIs on the server-side?

Is it necessary to mark all checkboxes in the initial column of the gridview?

Building a Bootstrap Tooltip

Tips on adjusting the text color of the material radio button

issues encountered when trying to integrate bootstrap.js in Django framework

Guide to extend the width of h1 container to fill the entire parent div

Looking for ways to locate encoded HTML values in chrome?

How to fix Bootstrap 4 Card Header and Form-Control wrapping onto a new line

Picture that perfectly matches the height of the window

Utilizing CSS position sticky in Bootstrap 4 to maintain visibility of a sidebar

Hide dropdown when clicked outside of it

Issues have arisen with the main background image in IE7 on ProLoser's AnythingSlider

Is it possible to create virtual hosts for NodeJS applications built using Apache and Yeoman on the same server?