2016-05-02 3 views
0

Ich habe die folgende Scope-Variable im Controller meiner Direktive und mein Scope wird den Wert für die Variable als Wochentag oder Wochenende ausgewertet. Wenn es Wochentag ist, muss ich die CSS-Klasse .weekDay auf das Div setzen und wenn es Wochenende ist, muss ich die CSS-Klasse als .weekEnd einstellen. Der folgende ternäre Ausdruck, den ich in meiner Direktive benutzt habe, funktioniert nicht für mich? Was ist hier falsch und kann ich meinen Controller-Ausdruck in der ng-Klasse auswerten? Freundlich helfen.AngularJS: Wie kann ich den Wert des ternären Operators ng-Klasse gemäß dem Controller-Bereich ändern?

$scope.toDay = "Monday"; 
or 
$scope.toDay ="Sunday" 


<div ng-class="{toDay=='Sunday'? 'weekEnd':'weekDay'}"> 

Antwort

3

Sie benötigen === den Vergleichsoperator verwenden, so sollten Sie den Code wie folgt aussehen

<div ng-class="toDay === 'Sunday' ? 'weekEnd' : 'weekDay'"> 
+0

sorry. Ich habe es mit heute == 'Sonntag' versucht, aber es hat nicht funktioniert. Lass mich deinen Vorschlag ausprobieren ===. Danke – JsLearner

1

Try this:

$scope.toDay = "Monday"; 
or 
$scope.toDay ="Sunday" 


<div class="{{toDay==='Sunday'? 'weekEnd':'weekDay'}}"> 
+0

Wie wird das funktionieren? Sie haben "ng-class" losgelöst –

+0

In ng-Klasse nicht möglich ternären Operator verwenden. "Ausdruck zu eval. Das Ergebnis der Auswertung kann eine Zeichenfolge sein, die durch Leerzeichen getrennte Klassennamen, ein Array oder eine Zuordnung von Klassennamen zu booleschen Werten darstellt. Im Fall einer Zuordnung die Namen der Eigenschaften, deren Werte truthy wird dem Element als css classes hinzugefügt. " –

+1

ist es möglich, den ternären Operator mit 'ng-class' zu verwenden. Sehen Sie hier https://scotch.io/tutorials/the-many-ways-to-use-ngclass –

2
<div ng-class="[today === 'Sunday' ? 'weekend' : 'weekday']"> 

Note der [] statt {} & === stattdessen von =.

+0

Sie nicht wirklich. Sie können entweder eine String/String-Variable, eine Map ('' '{}' '') oder ein Array der Strings und/oder Map übergeben. Der Link, den Sie angehängt haben, erklärt dies. – yclee0210

+0

und mit '' '{}' '' in diesem Fall funktioniert nicht, weil '' '{today === 'Sunday'? 'wochenende': 'wochentag'} '' 'bewertet nicht wirklich zu einem gültigen JavaScript-Objekt. – yclee0210

0

Sie eigentlich nicht wirklich einen tertiären Operator verwenden müssen, können Sie Refactoring nur ein wenig und verwenden ...

<div ng-app ng-init="toDay = 'Monday'"> 
<h1 ng-class="{'weekEnd': toDay == 'Sunday', 'weekDay' : toDay != 'Sunday'}"> 
     Test Text 
    </h1> 
</div> 

Oder ein Vergleich in diese Richtung

Verwandte Themen