Angularjs: попытка создать значение стиля путем объединения переменной и «px»

Я сделал программу, которая позволяет пользователю писать текст на «белой доске» и менять цвет в реальном времени. Теперь я пытаюсь дать пользователю возможность изменять размер шрифта. Как я мог объединить переменную «writing_size» с символами «px», чтобы сформировать значение для «font-size»?

    <!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>
0
0
106
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Первая проблема: ключ font-sizeнельзя использовать без апострофов, потому что это недействительный ключ объекта JS. Вам нужно написать, например, ng-style="{'font-size': '12px'}".

Во-вторых, атрибут ng-style оценивается как JS, поэтому вы не можете использовать синтаксис двойных фигурных скобок, потому что это недопустимый JS. Просто напишите, как внутри JS: ng-style="{'font-size': writing_size + 'px'}".

Ваш рабочий пример:

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

Спасибо! Почему мне нужны апострофы для ключа font-size, а не color?

DennisM 26.10.2018 07:45

Потому что someObject.font-size в JS понимается как вычесть size из свойства someObject.font. То есть читалось бы как someObject.font - size. То же самое и с декларацией: var a = {font-size: 12} недействителен, но var a = {'font-size': 12} верен. См. stackoverflow.com/a/4348487/878514

fracz 26.10.2018 07:53

Другие вопросы по теме