角度js ng样式不起作用

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

在这个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>

ng-change在这个实例中不需要函数.

Working Example

编辑,解释:

select选项中的值不是angular指令,因此myStyle设置为字面意思是"{color:'red'}"而不是Object {"color":"red"}Angular正在寻找并可以解析的Javascript ng-style.

由于"{color:'red'}"的字面值看起来像对象,因此您不会注意到batarang的差异.但如果你经营一个,console.log()你会看到差异.

设置示例一,然后将示例2设置为红色并clearFilter通过添加两个日志更改您的功能并查看输出,您将看到我的意思:

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