search

Home  >  Article  >  Web Front-end  >  AngularJS realizes that textarea records can only enter a specified number of characters and display them_javascript skills

AngularJS realizes that textarea records can only enter a specified number of characters and display them_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:03:411508browse

AngularJS is an MV* framework, best suited for developing client-side single-page applications. It is not a functional library, but a framework for developing dynamic web pages. It focuses on extending the functionality of HTML, providing dynamic data binding, and it can work well with other frameworks (such as JQuery, etc.). 

<body ng-app="myNoteApp">
<html>
<div ng-controller="myNoteCtrl"> 
<p><textarea ng-model="message" cols="40" rows="10" maxlength="100"></textarea></p>
<p>100/<span ng-bind="left()"></span></p>
</div>
</html>
<script type="text/javascript">
var app=angular.module("myNoteApp",[]);
app.controller("myNoteCtrl",function($scope){
$scope.message = "";
//显示变更数量
$scope.left = function() {return 100 - $scope.message.length;};
//清除文本框
$scope.clear = function() {$scope.message = "";};
//执行保存操作
$scope.save = function() {alert("Note Saved");};
});
</script>
</body>

Remarks:

If there are multiple "textarea" in the same form, you can control it by defining multiple "ng-model"

If you operate different "textarea" in different forms, you can control it by defining multiple "ng-controllers"

But no matter what the situation, if it is in the same file, it is best to use only one "ng-app" in the same body

Additional: Usage of 4750256ae76b6b9d804861d8f69e79d3 in Angular JS

A recent test used to pass the value in textarea to the background, but the background could not receive it. The code is written like this: 

<textarea rows="15" ng-model="notice.content" style="width:65%">{{ notice.content }}</textarea>

Later, I modified it and removed the content between the two textareas, and the background can receive it. It seems that there are still some mechanisms in Angular JS that need to be clarified. 

<textarea rows="15" ng-model="notice.content" style="width:65%"></textarea>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Bootstrap form component tutorial detailed explanation_javascript skillsNext article：Bootstrap form component tutorial detailed explanation_javascript skills

Related articles

See more