使用ng-style在CSS中动态转换
transform当它在里面时，我无法上班ng-style。
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.13/angular.js" data-semver="1.2.13"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div style="transform: rotate(3deg);-webkit-transform: rotate(3deg);-ms-transform: rotate(3deg)">Test</div>
<div ng-style="{"transform": "rotate({{number}}deg)", "-webkit-transform": "rotate({{number}}deg)", "-ms-transform": "rotate({{number}}deg)"}">{{number}}</div>
<input type="number" ng-model="number" value=1>
</body>
</html>
链接：http：//plnkr.co/edit/txSzAKxLDq48LVitntro？p
= preview
如果更改input数字，则最上面的div应该同时 旋转 。当它的值为3时，它看起来应该像上面的单词 Test 。
那么transform在这种情况下如何上班呢？
谢谢。
问题答案：
您不能在属性内的JS字符串内使用大括号绑定。您可以将变量附加到字符串上：
<div ng-style="{'transform': 'rotate('+number+'deg)', '-webkit-transform': 'rotate('+number+'deg)', '-ms-transform': 'rotate('+number+'deg)'}">{{number}}</div>
另外，我用单打替换了双引号。
但是，您可以考虑向控制器添加函数以返回适当的样式：
控制器：
// Create a variable to store the transform value
$scope.transform = "rotate(0deg)";
// When the number changes, update the transform string
$scope.$watch("number", function(val) {
$scope.transform = "rotate("+val+"deg)";
});
HTML：
<!-- We can now use the same value for all vendor prefixes -->
<div ng-style="{'transform': transform, '-webkit-transform': transform, '-ms-transform': transform }">{{number}}</div>
更新的柱塞
-
问题内容： 我在 boostrap3 上遇到问题，它的 默认背景是：transparent！important; 打印设置。 我需要在我的Web应用程序中显示一个热图，并使其可打印。 我为此使用ng-style指令来动态计算所需的背景色。 简而言之，这是html部分 这是控制器部分 但是，由于bootstrap3使用 ！important 关键字将所有背景设置为透明，因此无法打印这些背景。 这是b
-
问题内容： “活动”类的CSS来自引导程序。 因此，切换作品几乎是我想要的。我希望它类似于导航链接中的活动状态，但在我的示例中，它处理图像，因此需要担心url字符串等。 我尝试模拟此示例，但没有用（我尝试了相同的图像逻辑）：ng-class突出显示基于ng- repeat的活动菜单项,如果有人能指出我正确的方向，我将不胜感激。：D 问题答案： 在您遇到的情况下，我要做的是在ng-repeat的父范
-
Flex支持使用CSS语法和样式以与CSS到HTML组件相同的方式应用于其UI控件。 方式＃1:使用外部样式表文件 您可以参考应用程序类路径中可用的样式表。 例如，考虑一下Hello com/wenjiangs/client folder World.mxml文件所在的com/wenjiangs/client folder中的Style.css文件。 /* CSS file */ @namespa
-
问题内容： 我想问你是否可以帮我这个忙。 我在这里用我的问题创建了一个jsfiddle 。我需要使用ng-model =“ my _ {{$ index}}”方式在ng-repeater中动态生成一些带有ng-model的输入。 在jsfiddle中，您可以看到一切正常，直到我尝试动态生成它为止。 HTML将是： 还有javascript … 你能给我个主意吗？ 非常感谢。 问题答案： 它能解决您
-
Many MathJax components allow you to specify CSS styles that control the look of the elements they create. These are described using CSS style objects, which are JavaScript objects that represent stan
-
CSS & Style 2.1 CSS Get style // jQuery $el.css("color"); // Native // 注意：此处为了解决当 style 值为 auto 时，返回 auto 的问题 const win = el.ownerDocument.defaultView; // null 的意思是不返回伪类元素 win.getComputedStyle(el, nul