2015-11-05 80 views
0

我试图在用户输入数据时使用角度更改元素的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;} 

之后,控制器检查是否该元素的模型是空白,并且如果是这样,使得该函数返回真,并因此更改ng类中的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。

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

回答

0

尝试这样

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

或类似这样的

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

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

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

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

+0

它可以工作,但也会产生另一个问题,因为错误在默认情况下显示。我以前在某种方法中使用它的原因是因为我只希望它在发生更改后开始检查错误。 – Tater

+0

@Tater然后使用'ng-class =“{'errorClass':inputOne =='','defaultClass':inputOne}”' –