对无效的返回值应用ng类

时间:2015-11-18 15:06:36

标签: javascript angularjs twitter-bootstrap angular-ui-bootstrap

我想对来自控制器中的方法的无效返回应用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>

这是我的简单检入控制器:

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

另外,我如何将其设计为内联ng-if表达式而不是控制器中的方法?当td-input值大于error时,我希望upperbound转到lowerbound州。

1 个答案:

答案 0 :(得分:1)

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