使用ng样式的css动态转换
使用ng样式的css动态转换
提问于 2014-02-28 09:55:17
当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在这种情况下工作呢？
谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-02-28 10:02:48
不能在属性内的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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22091733
复制相关文章
相似问题
腾讯云开发者
