使用ng-style在css中动态转换 [英] Dynamically transform in css using ng-style
问题描述
当它在 ng-style 里面时，我无法获得转换。
I could not get transform to work when it's inside 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
如果我更改输入顶部div应该改变的数字，同时旋转。当它的值为3时，它应该看起来像测试这个词。
If I change the input number the top div should change and spin at the same time. It should look like the word Test above it when it has value of 3.
那么如何获得转换在这种情况下工作？
So how to get transform to work in this case?
谢谢。
推荐答案
您不能在属性内的JS字符串中使用大括号绑定。您可以将变量附加到字符串上：
You can't use brace binding inside a JS string inside an attribute. You can append the variable onto the string instead:
<div ng-style="{'transform': 'rotate('+number+'deg)', '-webkit-transform': 'rotate('+number+'deg)', '-ms-transform': 'rotate('+number+'deg)'}">{{number}}</div>
另外，我用单打代替你的双引号。
Also, I replaced your double-quotes with singles.
但是，您可以考虑向控制器添加一个函数以返回相应的样式：
However, you might consider adding a function to your controller to return the appropriate style:
控制器：
// 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>
这篇关于使用ng-style在css中动态转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
