javascript - 输入后有条件地应用 Angular 中的两个类之一？

Question

我正在使用 Angular，并且想有条件地应用一个类。

我想评估用户输入的药物剂量，如果它低于设定的截止值，则将 .green 类添加到输出，以及 .red 类如果它高于截止值。

在输入药物剂量之前，我不想应用这两个类 - 这就是我的问题的根源。

我知道如何在输入剂量后使用 ng-class 有条件地应用类:

// Template
<input type="number" ng-model="dose" ng-change="checkDose()" /> ...
<div ng-class="$doseIsAcceptable ? 'green' : 'red'">{{ dose }}</div>
// Controller
$scope.checkDose = function() { 
  $scope.doseIsAcceptable = ($scope.dose < 10.0) ? true : false;
};

但是，我不确定该怎么做是在输入剂量之前不要应用任何类别(绿色或红色)。

在最初应用红色类的那一刻，我猜是因为 $doseIsAcceptable 最初是未定义的，因此评估为 false。

有什么建议吗？

Answer 1

试试这个语法:

<div ng-class="{'true':'green', 'false':'red'}[doseIsAcceptable]">{{ dose }}</div>

http://jsfiddle.net/nKDKs/