Home > Developer > Web Develop
<! DOCTYPE html>
<title> Comprehensive Small Instance </title>
<meta charset= "Utf-8" >
<link rel= "stylesheet" href= ". /css/bootstrap.css ">
<script src= ". /js/angular.js "></script>
<style>
. text-warning{color:red;}
</style>
<body>
<!--Add module modules and write the controller in the module, the controller takes effect--
<div ng-controller= "Limittext" class= "container" >
<span ng-class= "{' text-warning ': Showldwarn ()}" > remaining words: {{remaining ()}}/140</span>
<div class= "Row" >
<textarea ng-model= "message" rows= "class=" col-md-6 "></textarea><br>
Input is: <span ng-bind= "message" ></span>
</div>
<div class= "Row" >
<button class= "btn btn-default" ng-click= "Send ()" ng-disabled= "!hasvalidlength ()" > Send </button>
<button class= "btn btn-default" ng-click= "Clear ()" > Clear </button>
</div>
</div>
<script>
var mymodule = angular.module ("MyApp", []);
Mymodule.controller (' Limittext ', [' $scope ', function ($scope) {
var max_len = 140;
$scope. Message = "AHSDHIASDH";
$scope. Remaining = function () {//return remaining Word Count method
Return max_len-$scope. message.length;
}
$scope. Showldwarn = function () {//Returns a judgment condition with a difference of less than 10, which invokes the style of the font red when the condition is met
var Chazhi = max_len-$scope. message.length;
return Chazhi < 10;
}
$scope. hasvalidlength = function () {//method that returns the length of text within the valid range
Return $scope. Message.length <= Max_len;
}
}])
</script>
</body>
[email protected] Comprehensive small instance 1
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
