无法使用角度js中的下拉菜单更改颜色

Question

这是我正在处理的plunker。现在的问题是我能够改变示例1中的颜色，但无法在示例2中更改颜色。
在此先感谢。

Answer 1

这实际上是一个简单的修复方法，myStyle更多属于myColor类型的声明，而ng-style上有{{'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>

这是jsFiddle example

---

<强>解释

select选项中的值不是angular指令，因此myStyle被设置为字面上的“{color：'red'}”而不是Angular正在寻找并可以解析的Javascript对象{"color":"red"} ng-style。

由于“{color：'red'}”的字面值看起来像对象，因此您不会注意到Chrome AngularJS扩展程序batarang的差异。但如果你运行console.log()，你就会看到差异。