不工作角JS纳克风格 [英] Angular js ng style not working

问题描述

http://plnkr.co/edit/IOHjEGbuOzD4CjwRqIK9?p=$p$ PVIEW

在此plunker，例如1工作完全正常，但例如，在2选择颜色是行不通的。

In this plunker, example 1 works perfectly fine but in example 2 select color is not working.

在此先感谢

推荐答案

这其实是一个简单的修复，有 myStyle的更多的是 myColor的声明的类型和 NG-风格有你的 {{'颜色'：myColor}} 前pression：

This is actually a simple fix, have myStyle be more of a myColor type of declaration and on ng-style have your {{'color':myColor}} expression:

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

有没有必要在的这的实例。

There is no need for a ng-change function in THIS instance.

<大骨节病> 工作实例

修改，解释：

在选择选项值的角度指令，以便 myStyle的被设置为字面意思是{颜色：红色}不是JavaScript的对象 {颜色：红色} 的角度寻找并可以在纳克风格解析。

Value in select option is not an angular directive so myStyle is being set to literally "{color:'red'}" not the Javascript Object {"color":"red"} that Angular is looking for and can parse in ng-style.

由于{颜色：'红'}的字面意义貌似对象，然后你不会注意到在batarang的差异。但是，如果你运行一个的console.log（），你会看到其中的差别。

Since the literal value of "{color:'red'}" looks like the object then you will not notice the difference in batarang. But if you run a console.log() you'll see the difference.

设置你的榜样之一，然后设置例如2到红色，加入两个日志改变你的 clearFilter 功能，并期待在输出，你就会明白我的意思

Set your example one, then set example 2 to red and change your clearFilter function by adding the two logs and look at the output and you'll see what I mean:

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

这篇关于不工作角JS纳克风格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！