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

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。

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

它将通过两种方式绑定工作。不需要方法来检查