How to apply conditional CSS class based on Json string response using AngularJS?

I want to apply css classes based on JSON response for example if response is "Low" i want background color green and apply radio-low css class and if response is "medium" i want to make background color yellow.How i can acieve this task using AngularJS.

HTML

<form kendo-validator="ratingValidator" name="processRatingForm" novalidate ng-cloak ng-controller="EditProcessRatingCtrl" class="border-box-sizing grids-fonts"> <p class="status">{{PrcsratingValidationMsg}}</p> <div class="row"> <div class="form-group col-md-6"> <div> <label class="control-label" for="processInherentRisk">Process Inherent risk rating</label> </div> <div id="processInhRisk" ng-model-options="{ updateOn: 'blur' }" ng-model="processRating.inherentRiskRatingKey" class="radio-low" >{{processRating.inherentRiskRatingKey}}</div> </div> <div class="form-group col-md-6"> <div> <label class="control-label" for="finalOutcomeInherentRiskRatingKey">Process Inherent risk Business Final</label> </div> <div id="irrFinalOutcome" ng-model-options="{ updateOn: 'blur' }" ng-model="processRating.finalOutcomeInherentRiskRatingKey" class="radio-medium">{{processRating.finalOutcomeInherentRiskRatingKey}}</div> </div> </div </form>

-------------Problems Reply------------

Just need to test the output and put the result in a $scope variable, then use that $scope variable in an ng-class declaration.

HTML

<div id="processInhRisk" ... ng-class="{processRating.isMedium: medium}">{{processRating.finalOutcomeInherentRiskRatingKey}}</div>

Javascript

$scope.processRating.isMedium = processRating.finalOutcomeInherentRiskRatingKey == 'medium';

CSS

.medium { background-color: yellow; }

Just pass the value to class(low,high) and mention the color in css.

HTML

<div id="processInhRisk" ng-model-options="{ updateOn: 'blur' }" ng-model="processRating.inherentRiskRatingKey" ng-class="{{processRating.inherentRiskRatingKey" >{{processRating.inherentRiskRatingKey}}</div>

css

.low{
color: bla bla bla
}
.high{
color: bla bla bla
}

Make sure you are getting the color code correctly in json

You can use ng-class directive.

<div ng-class="{processRating.inherentRiskRatingKey === 'low': 'radio-low'}" >{{processRating.inherentRiskRatingKey}}</div>

Edit:

<div ng-class="{processRating.inherentRiskRatingKey === 'low': 'radio-low', processRating.inherentRiskRatingKey === 'high': 'radio-high'}" >{{processRating.inherentRiskRatingKey}}</div>

Category:javascript Views:4 Time:2017-09-08

Related post

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.077 (s). 10 q(s)