ng-Modell kann ich seinen eigenen Wert überprüfen?

Question

Ich habe mit eckigen gespielt und ich bin derzeit in einer Gurke. Ich möchte überprüfen, ob der ng-Modellwert größer als 0 ist, um einen anderen CSS-Stil anzuwenden. Kann das gemacht werden?

`<span ng-model="users2" ng-hide="!myVar" ng-class="{'test2': users2 > 0}" style="font-size:28px; color:purple" >` 

jede Hilfe würde geschätzt werden? Danke!

Answer 1

Sie haben alles richtig

Look at this JSBin

für weitere Beispiele am ngClass Documentation Schauen Sie auch.

Wenn es nicht funktioniert, ist es wahrscheinlich ein anderes Problem.

Edit:

ich über das völlig gesehen, aber wie in den Kommentaren erwähnt die ngModel directive bindet einen Eingang, wählen Sie Textbereich (oder Steuer individuelle Form) auf eine Eigenschaft auf den Rahmen. So auf einer Spannweite hat es nichts zu tun und ist einfach nicht

JSBin Example

Answer 2

definiert Wenn Sie span auf Basis variabler Wert CSS-Stil wollen ändern Sie ng-class verwenden sollten. Sie können sogar if-else Anweisung:

<div ng-class=" ... ? 'class-1' : (... ? 'class-2' : 'class-3')"> 

Answer 3

Inline-Stile werden eine höhere Priorität als CSS-Klassen haben.

Wenn Sie Ihrer Klasse !important hinzufügen, sollte es wie erwartet funktionieren. Aber ich würde vermeiden, Inline-Stile zu verwenden. Also nur mit ng-class arbeiten.

Bitte schauen Sie sich die Demo an oder unter dieser fiddle.

angular.module('demoApp', []) 
 
\t .controller('mainController', MainController); 
 
    
 
function MainController() { 
 
\t var vm = this; 
 
    angular.extend(vm, { 
 
    \t myVar: true, 
 
     users2: 1 
 
    }); 
 
}

.test2 { 
 
    color: red !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="demoApp" ng-controller="mainController as ctrl"> 
 
    <input ng-model="ctrl.users2"/> 
 
    <span ng-hide="!ctrl.myVar" style="font-size:28px; color:purple" ng-class="{'test2': ctrl.users2 > 0}"> 
 
    some content 
 
    </span> 
 
</div>

Answer 4

ng-Modell funktioniert nur auf Eingabefeld, ein Textfeld, Optionsfelder, Kontrollkästchen. Da Sie ng-model auf span verwendet haben, wird das Modell selbst nicht aktualisiert.

So $ scope.users2 == undefined immer