Динамически установить класс в элементе с помощью ng-class и ng-change

Question

Динамически установить класс в элементе с помощью ng-class и ng-change

0

Я хотел бы, чтобы в моем поле ввода была .form-control-error. И когда пользователь нажимает на поле ввода и начинает вводить что-то в него, я хотел бы, чтобы поле ввода изменилось на класс .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">

Karl Morrison 27 сен. 2015, в 03:58

Источник

Теги:

javascript

angularjs

css

2 ответа

0

У вас может быть возвращаемое значение 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">

FRECIA 27 сен. 2015, в 00:05

Ещё вопросы

Yaron U. · Accepted Answer · 2015-09-27T00-02-00.000Z

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

Отлично! Спасибо. Хорошие чистые примеры являются лучшими.
Дополнительный голос за показ в обоих направлениях!