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