如何在AngularJS表达式中根据整数值切换对应class

你的原始代码存在几处语法和逻辑错误，按以下方式修改即可实现需求： #

错误点说明

• ng-class 后缺少等号，属性书写不完整
• ng-class 指令内部无需嵌套{{}}，本身可直接解析AngularJS表达式
• 你使用的allCallsNet.value != 'Negative'判断逻辑完全错误，差值为数值类型，没有value属性，也无需和字符串做比对，直接判断数值大小即可
• 模板内直接写{allCallsNet=allCallsWeek1 - allCallsWeek2;""}是不规范的赋值写法，要么放在控制器中处理，要么用ng-init指令完成模板内初始化

正确实现代码

方式1：推荐在控制器中完成计算

AngularJS控制器代码：

// 示例数据可替换为你的实际业务值
$scope.allCallsWeek1 = 156;
$scope.allCallsWeek2 = 112;
// 直接计算差值
$scope.allCallsNet = $scope.allCallsWeek1 - $scope.allCallsWeek2;

HTML模板代码：

<p ng-class="{'positive': allCallsNet >= 0, 'negative': allCallsNet < 0}">
  {{allCallsNet}}
</p>

方式2：如果要直接在模板内计算差值

使用ng-init完成变量初始化：

<div ng-init="allCallsNet = allCallsWeek1 - allCallsWeek2">
  <p ng-class="{'positive': allCallsNet >= 0, 'negative': allCallsNet < 0}">
    {{allCallsNet}}
  </p>
</div>

配套CSS示例（可自定义样式）

.positive {
  color: #2ecc71;
  font-weight: 500;
}
.negative {
  color: #e74c3c;
  font-weight: 500;
}

内容的提问来源于stack exchange，提问作者Eric Garcia