如何使用 AngularJS 更改样式？ [复制]答案

【问题标题】：How to change style on change with AngularJS? [duplicate]如何使用 AngularJS 更改样式？ [复制]
【发布时间】：2014-11-28 17:58:14
【问题描述】：

我先用0px初始化一个变量：

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

然后我有一个需要该样式的块：

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

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

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

【问题讨论】：

【解决方案1】：

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

原因是ngStyle指令只是在里面取变量，比如：

ng-style="topStyle"

topStyle 为：

{top:'0px'}

然后每次都更新整个东西。

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

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

这与上面style的示例相同：

【讨论】：

【解决方案2】：

试试：

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

【讨论】：