Angular Style js ng not working

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 this plunker, example 1 works fine, but in example 2 the selection color does not work.

Thank you in advance

Answer 1

This is actually a simple fix, myStyle larger than myColor , and on ng-style expression {{'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> 

There is no need for the ng-change function in this case.

Working example

---

Edit, explanation:

The value in the selection option is not an angular directive, so myStyle set literally to "{color: 'red'}", not the Javascript Object {"color":"red"} , which is looking for angular and can parse ng-style .

Since the literal value "{color:" red "}" looks like an object, you will not notice the difference in batarang. But if you run console.log() , you will see the difference.

Set your example one, then set example 2 to red and change the clearFilter function by adding two logs and look at the result and you will see what I mean:

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