Я делаю программу под названием AngularJS whiteboard. Пользователь пишет текст в текстовом поле, и он появляется на изображении доски. Чтобы текст не выходил за пределы доски, я использую ограничение по количеству символов. Это прекрасно работает, когда ограничение по количеству символов не является переменной, но я хочу, чтобы ограничение по числу символов изменялось в зависимости от размера шрифта.
Моя формула пишет: размер * 2,875.
Однако это просто не работает. Я посмотрел на похожую ветку вопросов , но это не помогло. Вот одна из версий моего кода:
<!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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("button").click(function(){
$("#m").val('');
});
</script>
<title>AngularJS Whiteboard</title>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<textarea name="message" rows="10" cols="30" ng-model="writing" id = "m">
</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>
<!-- what times 24 = 69? 2.875. So limit to {{writing_size * 2.875}}. Do I need to do
some kind of parsing too?-->
<div id = "whiteboard" ng-bind="writing | limitTo: {{ ws }}" ng-style="{ color : marker_color, 'font-size': writing_size + 'px'}">
</div>
<button>Erase</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.ws = parseInt($scope.writing_size) * 2.875
}
});
</script>
</body>
</html>
Когда я пишу:
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.ws = function() {
return parseInt($scope.writing_size) * 2.875
}
});
</script>
и сделать ws функцией, она тоже не работает.