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

编辑，解释：

select选项中的值不是角度指令，因此myStyle被设置为字面上的“{color：'red'}”而不是Angular正在寻找的Javascript Object {"color":"red"}并且可以在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 = '';
};

Answer 2

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

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

角度js ng样式不起作用

2 个答案: