AngularJS：试图通过组合变量和；px“；_Angularjs_Angularjs Bindings

AngularJS：试图通过组合变量和；px“；

angularjs

AngularJS：试图通过组合变量和；px“；,angularjs,angularjs-bindings,Angularjs,Angularjs Bindings,我制作了一个程序，允许用户在“白板”上书写文本，并实时更改颜色。我现在尝试给用户改变字体大小的能力。如何将“writing_size”变量与字符“px”组合起来形成“font size”的值 AngularJS白板标记颜色：书写大小： {{writing_size+“px”} 第一个问题：字体大小键，因为它不是有效的JS对象键。您需要编写例如ng style=“{'font-size'：'12px'}” 其次，ng style属性被计算为JS，因此不能使用双大括号语法，因为它不是有效的

我制作了一个程序，允许用户在“白板”上书写文本，并实时更改颜色。我现在尝试给用户改变字体大小的能力。如何将“writing_size”变量与字符“px”组合起来形成“font size”的值


AngularJS白板
标记颜色：
书写大小：




{{writing_size+“px”}

第一个问题：

字体大小

键，因为它不是有效的JS对象键。您需要编写例如

ng style=“{'font-size'：'12px'}”

其次，

ng style

属性被计算为JS，因此不能使用双大括号语法，因为它不是有效的JS。就像在JS中一样编写：

ng style=“{'font-size'：编写_-size+'px'}”

您的工作示例：


AngularJS白板
标记颜色：
书写大小：




{{writing_size+“px”}

谢谢！为什么键“font-size”需要撇号而不是“color”？因为JS中的

someObject.font-size

可以理解为从

someObject.font

属性中减去

size

。也就是说，它将被解读为

someObject.font-size

。声明也是如此：

var a={font-size:12}

无效，但

var a={'font-size'：12}

正确。看见

    <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>


<title>AngularJS Whiteboard</title>
</head>

<body>

<div ng-app="">



<textarea name="message" rows="10" cols="30" ng-model="writing">
</textarea>
<span>    Marker color: <input type = "text" size = "7" ng-model="marker_color"></span>
<span>    Writing size: <input type = "text" size = "7" ng-model="writing_size"></span>

<br>
<br>

<div id = "whiteboard" ng-bind="writing" ng-style="{ color : marker_color, font-size: {{writing_size + 'px'}} }">   
</div>

<div id = "test">
{{ writing_size + "px"}}
</div>

</div>

</body>
</html>