使用ng-style在CSS中动态转换

一尘不染

使用ng-style在CSS中动态转换

angularjs

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在这种情况下如何上班呢？

谢谢。

阅读 330

2020-07-04

共1个答案

一尘不染

您不能在属性内的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>

更新的柱塞

2020-07-04