Change class with angular if response is false

Question

I'm having some problems how to switch class if request is false. Let me show you my code with explanation.

So this is how my input looks like

<div class="form-group">
    <label for="locationName">Location name</label>
    <input type="text" class="form-control" id="locationName"
           ng-model="locationName">
</div>

And this the part of controller where i fetch the response

}).success(function(data, status, headers, config) {
    console.log(data, status, headers, config);
}).error(function(data) {
    $scope.locationNameError = data.errors.locationName;
});

So now i wan't to achieve that when $scope.locationNameError is set my class on that desired input has to be form-group has-error

So far i was think to make same sort if for example, but this is not working

<div ng-if="!locationNameError" class="form-group">
<div ng-if="locationNameError" class="form-group has-error">

Am i doing this the wrong way? I wan't to implement the solution with the less code possible. Thank you for your help.

Answer 1

Use ng-class instead for ng-if :

Change:

<div ng-if="!locationNameError" class="form-group">
<div ng-if="locationNameError" class="form-group has-error">

To:

<div ng-class="{'has-error': locationNameError}" class="form-group">

Answer 2

使用ng-class指令，而不要使用两个ng-if

<div class="form-group" ng-class="{'has-error': locationNameError}" class="form-group">

Answer 3

Ng级可能是您想要的：

<div data-ng-class="{'has-error': locationNameError}">...</div>