angularjs - 如何使用 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}">.