kątowa js ng styl nie działa

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

W tym plunker, przykład 1 działa perfekcyjnie, ale w przykładzie 2 wybierz kolor nie działa.

góry dzięki

Answer 1

Właściwie jest to prosty fix, mają myStyle być bardziej myColor rodzaju deklaracji i na ng-style mieć wyrażenia {{'color':myColor}}:

<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> 

Nie ma potrzeby na ng-change funkcja w instancji THIS.

Working Example

---

Edycja wyjaśnienie:

Wartość w wybranej opcji nie jest kanciasty dyrektywa tak myStyle jest ustawiony na dosłownie "{color: 'czerwony'}" nie JavaScript Object{"color":"red"}, którego Angular szuka i może parsować w ng-style.

Ponieważ literalna wartość "{color: 'red'}" wygląda jak obiekt, nie zauważysz różnicy w batarangu. Ale jeśli uruchomisz console.log() zobaczysz różnicę.

Ustaw przykład jeden, a następnie ustawić na przykład 2 czerwone i zmienić funkcję clearFilter dodając dwa dzienniki i spojrzeć na wyjściu, a zobaczysz co mam na myśli:

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