2015-11-05 43 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}」' –