如何使用AngularJS改变变化风格？

Question

我首先使用0px初始化变量：

<span ng-init="topStyle='0px';">

然后我有一个块我需要那种风格：

<span ng-style="{top: '{{topStyle}}'}">

但是当我将该值更改为不同的值时，样式根本不会改变。以下是我的浏览器显示的内容：

<span ng-style="{top: '-50px'}" style="top: 0px;"></span>

Answer 1

您发布的代码无法正常运行，因为更新到来时，指令无法理解值已更改，因此，它不会更新stlye属性。

原因是ngStyle指令只是在其中包含变量，例如：

ng-style="topStyle"

将topStyle作为：

{top:'0px'}

然后每次更新整件事。

这是一个例子（点击我，点击更新ngStyle）：http://jsfiddle.net/tdegtLb4/2/

或者，您可以将ng-style更改为style，因此当变量更改时，该值显然会相应更新。

这与上面style：

的示例相同

http://jsfiddle.net/tdegtLb4/1/

Answer 2

尝试：

<span ng-style="{top: topStyle}">.