如何使用 AngularJS 应用基于 Json 字符串响应的条件 CSS 类？答案

【问题标题】：How to apply conditional CSS class based on Json string response using AngularJS?如何使用 AngularJS 应用基于 Json 字符串响应的条件 CSS 类？
【发布时间】：2015-03-30 15:35:23
【问题描述】：

我想应用基于 JSON 响应的 css 类，例如，如果响应为“低”，我想要背景颜色为绿色并应用单选低 css 类，如果响应为“中等”，我想将背景颜色设为黄色。我如何可以使用 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>

【问题讨论】：

看看ngClass。
你的标题没有很好地计算问题..你应该考虑改变它
juz 将从 json 获得的值传递给 ng-class。分配 css 颜色值。

标签： javascript css json angularjs

【解决方案1】：

只需测试输出并将结果放入$scope 变量中，然后在ng-class 声明中使用该$scope 变量。

HTML

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

Javascript

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

CSS

.medium { background-color: yellow; }

【讨论】：

【解决方案2】：

只需将值传递给 class(low,high) 并在 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
}

确保您在 json 中正确获取颜色代码

【讨论】：

【解决方案3】：

你可以使用 ng-class 指令。

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

编辑：

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

【讨论】：

如果这个字段响应高怎么办？