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

---

编辑，解释：

选择选项中的值不是角度指令，因此myStyle被设置为字面上的“{color:'red'}”，而不是Object {"color":"red"}Angular 正在寻找并且可以在ng-style.

由于“{color:'red'}”的字面值看起来像对象，因此您不会注意到batarang 的差异。但是如果你运行 aconsole.log()你会看到不同。

设置您的示例一，然后将示例 2 设置为红色并clearFilter通过添加两个日志来更改您的功能并查看输出，您会明白我的意思：

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

Answer 2

对于 Angular 6，ngStyle 可以按如下方式工作

<p [ngStyle]="{'color': 'red'}"> I Read in Red</p>