AngularJS实现textarea记录只能输入规定数量的字符并显示


Posted in Javascript onApril 26, 2016

AngularJS 是一个 MV* 框架,最适于开发客户端的单页面应用。它不是个功能库,而是用来开发动态网页的框架。它专注于扩展 HTML 的功能,提供动态数据绑定(data binding),而且它能跟其它框架(如 JQuery 等)合作融洽。

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

备注:

如果在同一个表单中有多个“textarea”可以通过定义多个“ng-model”来控制

如果在不同的表单中操作不同的”textarea“ ,可以通过定义多个“ng-controller”来控制

但不管何种情况,如果在同一个文件中,同一个body中最好只使用一个”ng-app“

补充:Angular JS 中的 <textarea>用法

最近测试用把 textarea 中的值传往后台传,不过后台收不到,代码是这样写的:

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

后来修改了一下,把两个 textarea 之间的内容去掉了,后台就能收到了,看来Angular JS中还是有一些机制需要去弄清楚。

<textarea rows="15" ng-model="notice.content" style="width:65%"></textarea>
Javascript 相关文章推荐
让getElementsByName适应IE和firefox的方法
Sep 24 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 Javascript
javascript异步编程代码书写规范Promise学习笔记
Feb 11 Javascript
jQuery插件pagination实现分页特效
Apr 12 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
Mar 25 Javascript
微信小程序  Mustache语法详细介绍
Oct 27 Javascript
PHP实现记录代码运行时间封装类实例教程
May 08 Javascript
Dropify.js图片宽高自适应的方法
Nov 27 Javascript
实例讲解v-if和v-show的区别
Jan 31 Javascript
在vue和element-ui的table中实现分页复选功能
Dec 04 Javascript
jquery实现有过渡效果的tab切换
Jul 17 jQuery
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
50 个 jQuery 插件可将你的网站带到另外一个高度
Apr 26 #Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
Apr 26 #Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
Apr 26 #Javascript
JavaScript事件处理的方式(三种)
Apr 26 #Javascript
学习AngularJs:Directive指令用法(完整版)
Apr 26 #Javascript
jQuery siblings()用法实例详解
Apr 26 #Javascript
JQuery插件Marquee.js实现无缝滚动效果
Apr 26 #Javascript
You might like
在任意字符集下正常显示网页的方法一
2007/04/01 PHP
PHP大转盘中奖概率算法实例
2014/10/21 PHP
PHP判断上传文件类型的解决办法
2015/10/20 PHP
PHP响应post请求上传文件的方法
2015/12/17 PHP
浅析PHP7新功能及语法变化总结
2016/06/17 PHP
破除一些网站复制、右键限制
2006/11/04 Javascript
javascript代码加载优化方法
2011/01/30 Javascript
Jquery弹出窗口插件 LeanModal的使用方法
2012/03/10 Javascript
jquery 简单应用示例总结
2013/08/09 Javascript
JavaScript中常用的六种互动方法示例
2015/03/13 Javascript
如何在Angular.JS中接收并下载PDF
2016/11/26 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
2017/02/08 Javascript
JS异步文件上传(兼容IE8+)
2017/04/02 Javascript
js中的事件委托或是事件代理使用详解
2017/06/23 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
2018/10/31 Javascript
jquery插件开发模式实例详解
2019/07/20 jQuery
浏览器JavaScript调试功能无法使用解决方案
2020/09/18 Javascript
微信小程序实现星星评分效果
2020/11/01 Javascript
浅谈Python实现Apriori算法介绍
2017/12/20 Python
Python爬虫使用脚本登录Github并查看信息
2018/07/16 Python
解决Pycharm调用Turtle时 窗口一闪而过的问题
2019/02/16 Python
python分数表示方式和写法
2019/06/26 Python
python+logging+yaml实现日志分割
2019/07/22 Python
Python实现线性判别分析(LDA)的MATLAB方式
2019/12/09 Python
python利用Excel读取和存储测试数据完成接口自动化教程
2020/04/30 Python
美国床垫和床上用品公司:Nest Bedding
2017/06/12 全球购物
Notino匈牙利:购买香水和化妆品
2019/04/12 全球购物
西铁城美国官方网站:Citizen Watch美国
2019/11/08 全球购物
一道写SQL的面试题和答案
2013/11/19 面试题
关于打架的检讨书
2014/01/17 职场文书
环境工程专业自荐信范文
2014/03/18 职场文书
个人总结与自我评价
2014/09/18 职场文书
珍爱生命主题班会
2015/08/13 职场文书
导游词之湖北武当山
2019/09/23 职场文书
导游词之镇江西津古渡
2019/11/06 职场文书
MySQL Threads_running飙升与慢查询的相关问题解决
2021/05/08 MySQL