Question

我希望我的输入字段可以开始使用类.form-control-error。当用户点击输入字段并开始在其中键入内容时，我希望输入字段更改为css类.form-control-success。

我尝试使用以下代码，但不想更改。然而，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">

Answer 1

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';
    };
};

在您的情况下，由于该值是固定的，并且不需要任何＆＃34;计算＆＃34; - 你也可以删除该函数并使用一个简单的字符串 - 所以它将是

<强> HTML

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

<强> 的JavaScript

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

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

Answer 2

您可以将返回值作为setter并将选项添加到ng-class对象。在这种情况下，如果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">

使用ng-class和ng-change动态设置元素中的类

2 个答案: