Angular js ng Stil nicht

Question

<span>Select color : </span> 

<select ng-model="myStyle"> 
    <option value="">none</option> 
    <option value="{color:red}">Red</option> 
    <option value="{color:'green'}">Green</option> 
</select> 

<div ng-style="myStyle"> 

http://plnkr.co/edit/IOHjEGbuOzD4CjwRqIK9?p=preview

In diesem Plunker, Beispiel 1 funktioniert perfekt in Ordnung, aber in Beispiel 2 Farbe wählen Arbeits nicht funktioniert.

Vielen Dank im Voraus

Answer 1

Dies ist eigentlich eine einfache Lösung, hat myStyle eine myColor Art der Erklärung mehr sein und auf ng-style haben Ihren {{'color':myColor}} Ausdruck:

<select ng-model="myColor"> 
    <option value="">none</option> 
    <option value="red">Red</option> 
    <option value="green">Green</option> 
</select> 

<div ng-style="{'color':myColor}"> 
    <p>Text to change color</p> 
</div> 

Es besteht keine Notwendigkeit für ein ng-change Funktion in DIESE Instanz.

Working Example

---

bearbeiten, Erklärung:

Wert in ausgewählter Option ist kein Winkel Richtlinie so wird myStyle gesetzt wird buchstäblich "{color: 'red'}" nicht das Javascript Object{"color":"red"} dass Angular sucht und in ng-style analysieren kann.

Da der Literalwert von "{color: 'red'}" wie das Objekt aussieht, werden Sie den Unterschied in Batarang nicht bemerken. Aber wenn Sie eine console.log() ausführen, werden Sie den Unterschied sehen.

Stellen Sie Ihr Beispiel eine, dann Vorbild 2 bis rot und ändern Sie Ihre clearFilter Funktion durch die beiden Protokolle hinzufügen und sehen Sie die Ausgabe und Sie werden sehen, was ich meine:

$scope.clearFilter = function() { 
    console.log('myStyle1', $scope.myStyle1); 
    console.log('myStyle', $scope.myStyle); 
    $scope.query = ''; 
    $scope.orderProp = ''; 
    $scope.myColor = ''; 
};