使用ng-class和ng-change動態設置元素中的類

我希望我的輸入字段具有以.form-control-error開頭的類。當用戶點擊輸入字段並開始鍵入內容時，我希望輸入字段更改爲css類.form-control-success。使用ng-class和ng-change動態設置元素中的類

我試過用下面的代碼，但它不想改變。然而，ng-change會像它應該發射一樣，所以它只是與更新css有關。

CSS：

// ... more classes 
.form-control-error:focus { 
    border-color: #FF0000; 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6); 
} 
.form-control-success:focus { 
    border-color: #5cb85c; 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6); 
}

JS：

$scope.changeEmail = function() { 
    console.log('change'); 

    $scope.formControlColor = function() { 
     return 'form-control-success'; 
    }; 
};

HTML：

<input type="text" id="email" ng-model="email" ng-change="changeEmail()" placeholder="email" ng-class="{'form-control-error': formControlColor}" class="form-control input-lg margin-bottom-15">

來源

2015-09-27 Karl Morrison

formControlColor是返回所需類的功能，所以如果你想使用的返回值它在ng-class你應該只是調用它

<input ... ng-class="formControlColor()" ... />

你也應該設定功能的初始定義 - 這樣它會擁有一流的頁面加載時，讓你的JavaScript可能應該是這樣

$scope.formControlColor = function(){ 
    return 'form-control-error'; 
}; 
$scope.changeEmail = function() { 
    console.log('change'); 

    $scope.formControlColor = function() { 
     return 'form-control-success'; 
    }; 
};

你的情況由於該值是固定的，不需要任何「計算」 - 你還可以刪除功能，並使用一個簡單的字符串 - 所以這將是

HTML

<input ... ng-class="formControlClass" ... />

的JavaScript

$scope.formControlClass = 'form-control-error'; 

$scope.changeEmail = function() { 
    $scope.formControlClass = 'form-control-success'; 
}

來源

2015-09-27 01:18:12

完美！謝謝。乾淨的例子是最好的。 –

額外投票表示兩種方式！ –

你可以有返回值是setter和添加的選項了NG-類對象。在這種情況下，如果formControlCOlor返回false，則顯示錯誤css，否則顯示成功css：

<input type="text" id="email" ng-model="email" ng-change="changeEmail()" placeholder="email" 
ng-class="{'form-control-error': !formControlColor, 'form-control-success': formControlColor}" class="form-control input-lg margin-bottom-15">

來源

2015-09-27 01:19:25 FRECIA

使用ng-class和ng-change動態設置元素中的類

回答

相關問題