Question

我正在制作一个名为“ AngularJS白板”的程序。用户在文本框中写文本，并且文本显示在白板的图片上。为了确保文本不会超出白板，我使用了字符限制。当字符数限制不是变量，但我希望字符数限制根据字体大小更改时，此方法很好。

我的公式是Writing_size * 2.875。

但是，这是行不通的。我看着similar question thread，但没有帮助。这是我的代码的一个版本：

    <!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一个功能也不起作用。

通过将文本字段输入乘以2.875来限制字符

0 个答案: