Angular Ausdruck auswerten, wenn sie als Eigenschaft

Sagen Sie zum Beispiel festgelegt haben Sie Folgendes:Angular Ausdruck auswerten, wenn sie als Eigenschaft

$scope.element = 
      { 
       html: '<a type="button" class="btn btn-xs btn-rounded m-r-sm"><i class="icon icon-user-unfollow"></i></a>', 
       classExpression : " {{inactive == 'true' ? 'btn-success': 'btn-danger'}}", 
      }

Wie Sie wir haben ein veriable classExpression genannt sehen, welche der Ausdruck i an das Element anhängen möchte, ist

<span ng-bind-html="element.html | trust" class="{{element.classExpression}}">Text in between<span>

Aber es bewertet es nicht.

Also meine Frage, wie dies möglich ist (wenn es überhaupt möglich ist)

fiddle

meine Geige aktualisiert (es funktioniert nicht)

Quelle

2016-08-05 Marc Rasmussen

Warum nicht einfach ng-Klasse verwenden? https://docs.angularjs.org/api/ng/directive/ngClass – Wake

versuchen Sie, ng-Klasse zu verwenden –

@Wake kann nicht scheinen, ng-Klasse zu arbeiten, entweder mit dem Ausdruck als eine Eigenschaft eines Objekts –

ich sagen refactor würde Ihr Objekt habe folgende Struktur. Ich ermutige Sie nicht wirklich, Ausdrücke in string zu setzen.

HTML

<span ng-bind-html="element.html" ng-class="element.classExpression[element.inactive]"> 
    Text in between 
</span>

-Code

$scope.element = { 
    html: '<a type="button" class="btn btn-xs btn-rounded m-r-sm"><i class="icon icon-user-unfollow"></i></a>', 
    classExpression: { 
     'true': 'btn-success', 
     'false': 'btn-danger' 
    }, 
    inactive: 'true' 
};

Forked Fiddle

Quelle

2016-08-05 10:58:52

Das funktioniert, aber Millionen Dollar Frage, wie Sie es mit anderen Werten als wahr/falsch tun? –

@MarcRasmussen je nach Situation Sie können jederzeit die 'Schlüssel' Ihres' classExpression' Wertes ändern –

@gyc Darf ich wissen, was Sie sagen wollten? FYI, 'ng-Klasse' arbeitet nicht mit' {{}} 'Interpolation Direktive –

Sie könnten ng-Klasse verwenden, um direkt, anstatt sie zu binden zum Elementausdruck? Es wird neu bewertet werden whever Ihre scope.inactive wird sich ändern (oder Sie können den inaktiven zu Ihrem Element binden.

<span ng-bind-html="element.html | trust" ng-class="{'btn-success' : element.inactive, 'btn-danger' : !element.inactive}">Text in between<span>

In Angular 1.1.4 und neuere Sie könnten auch den ternären Operator

<span ng-class="element.inactive ? 'btn-success' : btn-danger">

Hier vorausgesetzt, Sie den inaktiven setzen auf Ihrem Element gebunden ist. Sie können direkt auf Ihrem inaktiven binden (auf Umfang statt).

Quelle

2016-08-05 10:37:29 CmdrTchort

Kannst du dir diese Geige anschauen: http://jsfiddle.net/Lvc0u55v/7995/und sag mir, was ich falsch gemacht habe? –

Ich habe Ihre jsfiddle aktualisiert, um ng-class zu verwenden, um den Wert Ihres Bereichs auszuwerten, anstatt den Wert als "classExpression" zu analysieren - http://jsfiddle.net/Lvc0u55v/8001/ - Das funktioniert (versuchen Sie, zB Ihren inaktiven Wert auf "true" zu setzen)/false und die Klassenänderungen mit ansehen). – CmdrTchort

Es gibt ein paar Probleme mit Ihrem Ansatz: Wenn Sie eine Bindung wünschen, möchten Sie einen Ausdruck, der den Scope Digest auswertet. Hier versuchen Sie, Ihre Klasse an einen Ausdruck zu binden, der nicht ausgewertet wird. Wenn Sie nur an einer einmaligen Bindung interessiert sind (den Wert verwenden), können Sie Ihren Code ändern. Benutze einfach class = "{{className}} und verwende normalen turnary expression in deinem js-Code (und lass className) die tatsächliche Klasse. Ich würde es bevorzugen, ng-class mit einem Ausdruck wie in der jsfiddle. – CmdrTchort

Sie müssen 01 entfernenvon Ihrem 'classExpression' wie als -

classExpression : " inactive == 'true' ? 'btn-success': 'btn-danger'"

und auch ng-class wie als verwenden -

ng-class="{{element.classExpression}}"

Quelle

2016-08-05 10:38:27

testen mit der Geige : http://jsfiddle.net/Lvc0u55v/7993/ scheint nicht zu funktionieren :( –

Ihre fiddlle ist falsch. und auch vor down voting, überprüfen Sie bitte richtig an Ihrem Ende. Ich habe es separat überprüft. und es funktioniert gut. –

Ich habe downvoted, der Grund ist Interpolation würde nicht funktionieren mit 'ng-Klasse' Richtlinie .. –

Möglicherweise Ihre classExpression eine Funktion machen:

$scope.element = 
     { 
      html: '<a type="button" class="btn btn-xs btn-rounded m-r-sm"><i class="icon icon-user-unfollow"></i></a>', 
      classExpression : function(){ 
       return $scope.inactive == 'true' ? 'btn-success': 'btn-danger'; 
      } 
     }

Quelle

2016-08-05 10:41:34 Wake

Hier ist ein funktionierendes Beispiel http://jsfiddle.net/k6d40aso/ – Wake

Angular Ausdruck auswerten, wenn sie als Eigenschaft

Antwort

Verwandte Themen