javascript - 对无效返回值应用 ng 类

Question

我想对 Controller 中方法的无效返回应用bootstrap has-error类。但我的尝试似乎都没有奏效。这是我的做法:

<form role="form" name="configForm">
    <div class="form-group">
        <label class="control-label">Not between</label>
        <table class="table table-bordered table-hover table-condensed">
            <tr style="font-style:italic; font-weight: bold">
                <td style="width: 50%">Lower Bound</td>
                <td style="width: 50%">Upper Bound</td>
            </tr>
            <tr ng-repeat="bounds in themeComponents.components[compKey].boundaries.notBetween">
                <td>
                    <input name="betweenLowBound" class="form-control" ng-model="bounds.lower" ng-class="{'has-error' : checkBounds(bounds.lower, bounds.upper) == true }">
                </td>
                <td>
                    <input name="betweenUpperBound" class="form-control" ng-model="bounds.upper" ng-class="{'has-error' : checkBounds(bounds.lower, bounds.upper) == true }">
                </td>
                <td>
                    <button type="button" ng-click="removeEasingItem(compKey, bounds)" class="btn btn-sm btn-danger">
                        <i class="glyphicon glyphicon-remove-circle">
                                           </i>
                    </button>
                </td>
            </tr>
        </table>
    </div>
</form>

这是我在 Controller 中的简单检查:

$scope.checkBounds = function (lower, upper) {
    if(lower > upper)
        return true;
    return false;
}

另外，我如何将其设计为内联 ng-if 表达式而不是 Controller 中的方法？我希望当 upperbound 值大于 lowerbound 时，td-input 进入 error 状态..

Answer 1

使用ng-class动态添加css:ng-class="{'has-error':bounds.lower>bounds.upper}"