Klasse mit Winkel ändern, wenn die Antwort falsch ist

Question

Ich habe einige Probleme, wie die Klasse wechseln, wenn die Anfrage falsch ist. Lass mich dir meinen Code mit Erklärung zeigen.

Das ist also, wie mein Eingang sieht aus wie

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

Und dies der Teil der Steuerung, wo ich die Antwort holen

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

So, jetzt wan't ich das zu erreichen, wenn $scope.locationNameError gesetzt Meine Klasse auf diesem gewünschten Eingang muss sein form-group has-error

Bisher war ich denke, um gleiche Art zu machen, wenn zum Beispiel, aber das funktioniert nicht

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

Mache ich das falsch? Ich möchte die Lösung mit weniger Code implementieren. Danke für Ihre Hilfe.

Answer 1

Verwendung von mit ng-class statt für ng-if:

Wechsel:

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

An:

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

Answer 2

Verwenden ng-class Direktive statt zwei ng-if

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

Answer 3

Ng-Klasse ist wahrscheinlich das, was Sie suchen:

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