角度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功能。

工作實例

---

編輯，解釋：

select選項中的值不是angular指令所以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>