利用Angular.js限制textarea输入的字数
更新时间：2016年10月20日 08:40:56 投稿：daisy
相信在大家已经学习了足够多关于AngularJS的知识后，就可以开始创建第一个AngularJS应用程序，这篇文章通过示例给大家介绍如何利用Angular.js限制textarea输入的字数，有需要的朋友们可以参考借鉴，下面来一起看看吧。
前言
大家可能都遇到过在输入的时候做出限制的需求，本文介绍的是通过Angular.js限制textarea输入字数的方法，有需要的朋友们可以参考以下实例。
实例代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS 简单应用程序--输入字数限制</title>
<!--
@author:sm
@email:sm0210@qq.com
@desc:AngularJS 简单应用程序--输入字数限制
-->
</head>
<!--
AngularJS 应用程序
您已经学习了足够多关于 AngularJS 的知识，现在可以开始创建您的第一个 AngularJS 应用程序：
-->
<body >
<div ng-app="myTodoApp" ng-controller="myTodoCtrl">
<h2>我的笔记</h2>
<p><textarea ng-model="message" cols="40" rows="10" ng-readonly="ngreadonly" ></textarea></p>
<p>
<button ng-click="save()">保存</button>
<button ng-click="clear()">清除</button>
</p>
<p>剩下字符数：<span ng-bind="left()"></span></p>
</div>
<!--引入angular-->
<script src="js/angular.min.js"></script>
<script language="javascript">
var app=angular.module("myTodoApp",[]);
app.controller("myTodoCtrl",function($scope){
$scope.message="";
$scope.ngreadonly = false;
$scope.left = function(){
if($scope.message.length>100){
$scope.ngreadonly = true;
return 0;
}
return 100-$scope.message.length;
}
$scope.clear = function(){$scope.message="";$scope.ngreadonly = false;}
$scope.save = function(){$scope.message=""}
});
</script>
</body>
</html>
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。
相关文章
这篇文章主要介绍了angular 实现下拉列表组件的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
Angular中ng-template和ng-container的应用小结
Angular的日常工作中经常会使用到ng-template和ng-container，本文对他们做一个总结,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2022-06-06
这篇文章主要介绍了angularjs的一些优化小技巧,本文总结了5种优化技巧,如一次绑定、尽可能少调用 ng-repeat、尽量在指令里写原生语法、页面内尽量少用filters等,需要的朋友可以参考下2014-12-12
这篇文章主要为大家介绍了Angular 独立组件入门教程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
这篇文章主要介绍了angular 中使用原生拖拽页面卡顿及表单控件输入延迟问题，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-04-04
angular是Google开发的一个单页面应用框架,是现在比较主流的单页面应用框架之一，下面通过本文给大家介绍AngularJs中route的使用方法和配置，感兴趣的朋友一起学习吧2016-02-02
本篇文章主要介绍了angularjs实现的前端分页控件示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
这篇文章主要介绍了使用Angular-CLI构建NPM包的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了AngularJS实现图片上传和预览功能的方法,结合HTML5实例形式对比分析了AngularJS图片上传的相关操作技巧与注意事项,需要的朋友可以参考下2017-11-11
这篇文章主要介绍了Angular 多模块项目构建过程，本文大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2020-02-02
最新评论