对无效的 return 值应用 ng class

Question

我想通过控制器中的方法将 bootstrap has-error class 应用到无效的 return 上。但是 none 我的尝试似乎奏效了。这是我的做法：

<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>

这是我在控制器中的简单检查：

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

此外，我如何将其设计为内联 ng-if 表达式而不是控制器中的方法？当 upperbound 值大于 lowerbound..

时，我希望 td-input 进入 error 状态

Answer 1

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

对无效的 return 值应用 ng class

apply ng class on invalid return value

javascript

twitter-bootstrap

angularjs

angular-ui-bootstrap