Добавить класс динамически из контроллера

Question

Я пытаюсь добавить класс к своему элементу в зависимости от того, является ли он обязательным и пустым полем.Не уверен, что я делаю не так.Мой console.log печатается, но класс не назначен.

Это мой HTML

<div ng-repeat="supplier in vm.exportSuppliers" class="row">
    <div class="col-xs-5">
        <label ng-show="vm.exportSuppliers[$index].exportSupplier" class="control-label" for="es{{$index}}+Ref">Agreement Reference *</label>
        <label ng-hide="vm.exportSuppliers[$index].exportSupplier" class="control-label" for="es{{$index}}+Ref">Agreement Reference</label>
        <input class="form-control" id="es{{$index}}+Ref" type="text" 
               ng-model="supplier.agreementReference" ng-change="vm.addExportSupplier()" 
               ng-blur="vm.requiredField('es'+$index+'+Ref')" 
               ng-required="vm.exportSuppliers[$index].exportSupplier">
    </div>
</div>

и моя функция, чтобы убедиться, что поле является обязательным и не заполнено

vm.requiredField = requiredField;

function requiredField (id) {
    if($scope.vm.exportSupplier.form.$error.required) {
        for (var i = 0; i < $scope.vm.exportSupplier.form.$error.required.length; i++) {
            if ($scope.vm.exportSupplier.form.$error.required[i].$$attr.id == id) {
                console.log('invalid required field');
                var myEl = angular.element( document.querySelector( id ) );
                myEl.addClass('top40');
            }
        }
    }
}

Что не так с моим addClass?

Answer 1

Вы можете добавить условные классы, используя ng-class и свойства формы, предоставляемые angularjs

Вам необходимо добавить атрибут "name" в форму и указать для него novalidate

<input class="form-control" id="es{{$index}}+Ref" type="text" 
	name="inputName"
	ng-class="{'error-class': formName.inputName.$invalid && formName.inputName.$touched}"
               ng-model="supplier.agreementReference" ng-change="vm.addExportSupplier()" 
               
               ng-required="vm.exportSuppliers[$index].exportSupplier">

Я думаю, это решит вашу цель.Нет необходимости писать функцию размытия в контроллере.

Answer 2

Есть два способа справиться с этой ситуацией.

Опция 1:

    <div ng-class="{'class1': obj.success, 'classB': obj.error}"></div>

Опция 2:

    <div class="{{obj.classes}}"></div>

Единственная проблема этого подхода заключается в том, что обновление шаблона может стать проблемой.Иногда контроллер может не обновлять шаблон.Если это так, используйте $ scope. $ Apply (); после внесения изменения.

Answer 3

Посмотрите на вопрос ниже.Я думаю, что вы могли бы улучшить свой подход, используя троичные операторы в классе ng.

угловое выражение класса ng if-else