Question

我正在尝试使用angular来在用户输入数据时更改元素的css类，无论是在按钮点击之后还是在用户输入数据时实时更改。

HTML：

<input type="text" class="defaultClass" ng-class="{true: 'errorClass',
false:'defaultClass'}[updateInput()]" ng-model="inputOne">

CSS：

.defaultClass {border: 1px solid #ccc;}

.errorClass {border: 1px solid #FF0000;}

按下按钮后，控制器会检查元素的模型是否为空，如果是，则使函数返回true，从而更改ng-class中的css类以显示错误。

$scope.calcButton = function (){

if ($scope.inputOne === "" || $scope.inputOne === undefined) {
    $scope.updateInput = function() {
        return true;
    };
} else {
    $scope.updateInput = function() {
        return false;
    };
}

};

在按钮单击功能之外，我在同一个控制器中有以下代码，应该观察$ scope.inputOne的状态，并根据输入的状态返回true或false：

$scope.updateInput = function() {
    if ($scope.inputOne === "") {
        return true;
    } else {
        return false;
    }
 };

只要我不单击按钮就可以正常工作，但是一旦按下按钮改变了值，控制器就会停止检查输入字段是否为空或填充。

这是一个问题，因为我想让错误消息逐渐消失，因为用户在按下按钮后输入错误时输入数据，但此时我无法通过用户输入更改css。

为什么这样做？如何在按钮单击后确保控制器仍然跟踪输入字段中发生的情况？

Answer 1

试试这个

ng-class="{'errorClass' : !inputOne,'defaultClass': inputOne }"

或者像这样

ng-class="!inputOne ? 'errorClass' : 'defaultClass'"

'',null,NaN,undefined,0等在JavaScript中考虑了false。

只是检查模型是否有价值。

它将通过双向绑定工作。不需要检查方法

更改值后，控制器停止更新值

1 个答案: