从控制器

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中的三元运算符来改进你的方法。

angular ng-class if-else expression

Answer 2

您可以使用angularjs

提供的ng-class和form属性添加条件类

您需要在表单上添加“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 3

有两种方法可以处理这种情况。

选项1：

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

选项2：

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

此方法的唯一问题是更新模板可能会成为一个问题。有时控制器可能不会更新模板。如果是这种情况，请在完成更改后使用 $ scope。$ apply（）; 。