javascript之使用 ng-style 在 css 中动态转换

符号阅读：1548 2023-11-05 18:46:41 评论：0

当它在 ng-style 中时，我无法让 transform 工作。

<!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 应该更改并同时 spin。当它的值为 3 时，它应该看起来像上面的单词 Test。

那么如何让 transform 在这种情况下工作呢？

谢谢。

请您参考如下方法:

您不能在属性内的 JS 字符串内使用大括号绑定(bind)。您可以将变量附加到字符串上:

<div ng-style="{'transform': 'rotate('+number+'deg)', '-webkit-transform': 'rotate('+number+'deg)', '-ms-transform': 'rotate('+number+'deg)'}">{{number}}</div>

另外，我用单引号替换了你的双引号。

但是，您可以考虑向 Controller 添加一个函数以返回适当的样式:

Controller :

// 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>

Updated Plunker

标签:JavaScript

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。