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.

What about using ng-class?

Mike Cluck
– Mike Cluck

2016-06-23 16:00:11 +00:00
Commented Jun 23, 2016 at 16:00 — Mike Cluck
– Mike Cluck, Commented Jun 23, 2016 at 16:00

Huy Chau · Accepted Answer · 2016-06-23 16:02:24Z

4

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">

answered Jun 23, 2016 at 16:02

Huy Chau

2,24821 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Valor_ Over a year ago

omg, it so easy :D lol. i'm amberesd a little bit :D Thank you

Huy Chau Over a year ago

Nice to help you :)

vtange · Accepted Answer · 2016-06-23 16:03:17Z

2

Ng-class is probably what you're looking for:

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

answered Jun 23, 2016 at 16:03

vtange

6491 gold badge5 silver badges10 bronze badges

Comments

Pankaj Parkar · Accepted Answer · 2016-06-23 16:06:38Z

2

Use ng-class directive instead of having two ng-if

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

edited Jun 23, 2016 at 16:06

answered Jun 23, 2016 at 16:01

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Collectives™ on Stack Overflow

Change class with angular if response is false

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related