What is the best way to dynamically update my CSS based on the value of JSON data?

Question

What is the best way to dynamically update my CSS based on the value of JSON data?

If the value of one of my keys is Green/Red, I would like to display a bootstrap button with the class btn-success when its value is green and btn-danger when it's red.

css angularjs json twitter-bootstrap

Answer 1

Answer №1

Your ng-class attribute needs to be updated:

<div ng:controller="CartForm">
  <ul>
    <li ng-repeat='country in countries'><a class="btn" ng-class="{'btn-primary': country.color == 'green', 'btn-danger': country.color == 'red'}" href="">{{country.name}} - {{country.population}}</a></li>
  </ul>
</div>

In addition, the appliedClass function should be deleted.

View a working example on jsFiddle

Answer 2

Your ng-class attribute needs to be updated:

<div ng:controller="CartForm">
  <ul>
    <li ng-repeat='country in countries'><a class="btn" ng-class="{'btn-primary': country.color == 'green', 'btn-danger': country.color == 'red'}" href="">{{country.name}} - {{country.population}}</a></li>
  </ul>
</div>

In addition, the appliedClass function should be deleted.

View a working example on jsFiddle

Answer 3

Answer №2

Have you considered using ng-class? You can implement it like this:

<p ng-class="condition ? 'classIfTrue' : 'classIfFalse'">Foo</p>

In your scenario, it could look something like this:

<p ng-class="myVariable ? 'btn-success' : 'btn-danger'">Foo</p>

If you need a code example to understand how it functions, take a look at this one:

angular.module('app', []).controller('MyCtrl', function() {
    this.valueSuccess = false;
    this.valueDanger = true;
});

.danger { background-color: red; }
.success { background-color: green; }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<section ng-app="app">
  <div ng-controller="MyCtrl as vm">
    <p ng-class="vm.valueSuccess ? 'danger' : 'success'"> {{vm.valueSuccess}}</p>
    <p ng-class="vm.valueDanger ? 'danger' : 'success'">{{vm.valueDanger}}</p>
  </div>
</section>

Answer 4

Have you considered using ng-class? You can implement it like this:

<p ng-class="condition ? 'classIfTrue' : 'classIfFalse'">Foo</p>

In your scenario, it could look something like this:

<p ng-class="myVariable ? 'btn-success' : 'btn-danger'">Foo</p>

If you need a code example to understand how it functions, take a look at this one:

angular.module('app', []).controller('MyCtrl', function() {
    this.valueSuccess = false;
    this.valueDanger = true;
});

.danger { background-color: red; }
.success { background-color: green; }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<section ng-app="app">
  <div ng-controller="MyCtrl as vm">
    <p ng-class="vm.valueSuccess ? 'danger' : 'success'"> {{vm.valueSuccess}}</p>
    <p ng-class="vm.valueDanger ? 'danger' : 'success'">{{vm.valueDanger}}</p>
  </div>
</section>

What is the best way to dynamically update my CSS based on the value of JSON data?

Answer №1

Answer №2

Similar questions

"The error message appeared stating that the AngularJS Protractor element cannot be clicked at its current position due to another element

Protractor synchronization with the page exceeded the time limit of 50001ms and timed out

Creating a return type for JSON observables in Angular 2 by defining it as an interface or

The imminent arrival of Postgresql JSONB has me wondering: Which data structure should be employed in the meantime - Hstore, JSON,

My JSON file is constantly being overwritten by an AJAX request

Unable to successfully submit a form using PHP

Using JSON.NET in C# to decode Twitter JSON and retrieve hashtags

What is the best way to center an element that completely fills the window?

Looking for assistance with a straightforward CSS opacity fix for Internet Explorer

When you try to create a popover, a cautionary message pops up indicating that $tooltip is no longer supported. It is

Facing issues with the functionality of a personalized AngularJS directive

Utilizing Python to Retrieve JSON Information with Django

Is there a way to modify the background shade of an HTML meter element?

Toggle the visibility of three different div elements using JavaScript on mouseover

Is there a way to align text in the middle while having different icons on each side?

Color-coding HTML table cells depending on the SQL flag value

CSS: The sub-class functionality is not functioning as intended

Error: JSONResponse is missing a semicolon before the statement in the syntax

Navigating through JSON using a variable in Postman loop

The issue with the <Button> component not properly linking in next.js