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/

Answer 2

@Richard

<div ng-class="doseIsAcceptable">{{ dose }}</div>

这将通过绑定类名（不带点）来实现，例如：

$scope.doseIsAcceptable = '';
$scope.doseIsAcceptable = 'red';
$scope.doseIsAcceptable = 'green';

彼得

在输入后，有条件地应用Angular中的两个类中的一个？

2 个答案: