利用Angular.js限制textarea输入的字数  更新时间:2016年10月20日 08:40:56   投稿:daisy   相信在大家已经学习了足够多关于AngularJS的知识后,就可以开始创建第一个AngularJS应用程序,这篇文章通过示例给大家介绍如何利用Angular.js限制textarea输入的字数,有需要的朋友们可以参考借鉴,下面来一起看看吧。 前言 大家可能都遇到过在输入的时候做出限制的需求,本文介绍的是通过Angular.js限制textarea输入字数的方法,有需要的朋友们可以参考以下实例。 实例代码如下 AngularJS 简单应用程序–输入字数限制 我的笔记 保存 清除 剩下字符数: 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。 您可能感兴趣的文章: js实现textarea限制输入字数 jQuery编写textarea输入字数限制代码 jquery实现textarea输入框限制字数的方法 JS控制文本框textarea输入字数限制的方法 Textarea输入字数限制实例(兼容iOS&安卓) angular.js 限制 textarea 相关文章 解决angular的post请求后SpringMVC后台接收不到参数值问题的方法 这篇文章主要介绍了解决angular的post请求后SpringMVC后台接收不到参数值问题的方法,感兴趣的小伙伴们可以参考一下 2015-12-12 AngularJs页面筛选标签小功能 AngularJS 是一个 JavaScript 框架。它可通过 标签添加到 HTML 页面。本文重点给大家介绍AngularJs页面筛选标签小功能,非常不错,需要的朋友可以参考下 2016-08-08 Angular 路由route实例代码 下面小编就为大家带来一篇Angular 路由route实例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2016-07-07 AngularJS iframe跨域打开内容时报错误的解决办法 这篇文章主要介绍了AngularJS iframe跨域打开内容时报错误的解决办法,需要的朋友可以参考下 2015-01-01 详解如何在angular2中获取节点 本篇文章主要介绍了如何在angular2中获取节点,详细的介绍了几种方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-11-11 详解angularJs中自定义directive的数据交互 这篇文章主要介绍了详解angularJs中自定义directive的数据交互,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-01-01 AngularJS 作用域详解及示例代码 本文主要介绍AngularJS 作用域的知识,这里整理了基础资料,和示例代码以及实现效果图,有需要的小伙伴可以参考下 2016-08-08 浅谈angular懒加载的一些坑 下面小编就为大家带来一篇浅谈angular懒加载的一些坑。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2016-08-08 AngularJS入门教程之服务(Service) 本文主要介绍 AngularJS Service,这里整理了AngularJS Servic的详细资料,并提供代码实例,有需要的小伙伴可以参考下 2016-07-07 AngularJS应用开发思维之依赖注入3 这篇文章主要为大家详细介绍了AngularJS应用开发思维之依赖注入第三篇,感兴趣的小伙伴们可以参考一下 2016-08-08 最新评论

前言

大家可能都遇到过在输入的时候做出限制的需求,本文介绍的是通过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>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

您可能感兴趣的文章:

  • js实现textarea限制输入字数
  • jQuery编写textarea输入字数限制代码
  • jquery实现textarea输入框限制字数的方法
  • JS控制文本框textarea输入字数限制的方法
  • Textarea输入字数限制实例(兼容iOS&安卓)
张贴在3