Javascript 如何使用AngularJS应用基于Json字符串响应的条件CSS类?
我想基于JSON响应应用css类,例如,如果响应为“低”,我希望背景颜色为绿色,应用radio Low css类,如果响应为“中”,我希望背景颜色为黄色。如何使用AngularJS执行此任务 HTMLJavascript 如何使用AngularJS应用基于Json字符串响应的条件CSS类?,javascript,css,json,angularjs,Javascript,Css,Json,Angularjs,我想基于JSON响应应用css类,例如,如果响应为“低”,我希望背景颜色为绿色,应用radio Low css类,如果响应为“中”,我希望背景颜色为黄色。如何使用AngularJS执行此任务 HTML <form kendo-validator="ratingValidator" name="processRatingForm" novalidate ng-cloak ng-controller="EditProcessRatingCtrl" class="bord
<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>
{{PrcsratingValidationMsg}
过程
固有风险评级
{{processRating.inherentRiskRatingKey}
过程
固有风险业务最终报告
{{processRating.finaloutcomeinherntriskratingkey}
您可以使用ng类指令
<div ng-class="{processRating.inherentRiskRatingKey === 'low': 'radio-low'}" >{{processRating.inherentRiskRatingKey}}</div>
{{processRating.inherentRiskRatingKey}
编辑:
<div ng-class="{processRating.inherentRiskRatingKey === 'low': 'radio-low', processRating.inherentRiskRatingKey === 'high': 'radio-high'}" >{{processRating.inherentRiskRatingKey}}</div>
{{processRating.inherentRiskRatingKey}
只需测试输出并将结果放入$scope
变量中,然后在ng类
声明中使用该$scope
变量
HTML
<div id="processInhRisk" ... ng-class="{processRating.isMedium: medium}">{{processRating.finalOutcomeInherentRiskRatingKey}}</div>
CSS
.medium { background-color: yellow; }
只需将值传递给类(低、高)并在css中提及颜色
HTML
请确保您在json中获得了正确的颜色代码。请看一看。您的标题并不能很好地解决这个问题。。您应该考虑更改IJUZ,将您从JSON获得的值传递到NG类。分配css颜色值。如果此字段响应较高,如何处理?
.medium { background-color: yellow; }
<div id="processInhRisk" ng-model-options="{ updateOn: 'blur' }" ng-model="processRating.inherentRiskRatingKey" ng-class="{{processRating.inherentRiskRatingKey" >{{processRating.inherentRiskRatingKey}}</div>
.low{
color: bla bla bla
}
.high{
color: bla bla bla
}