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>

THIS 实例中不需要 ng-change 函数。

Working Example

---

编辑、解释:

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

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

设置您的示例 1，然后将示例 2 设置为红色并通过添加两个日志更改您的 clearFilter 函数并查看输出，您就会明白我的意思:

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