Я сделал программу, которая позволяет пользователю писать текст на «белой доске» и менять цвет в реальном времени. Теперь я пытаюсь дать пользователю возможность изменять размер шрифта. Как я мог объединить переменную «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>
Первая проблема: ключ 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>
Потому что 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
Спасибо! Почему мне нужны апострофы для ключа font-size, а не color?