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 相关文章推荐
用javascript动态调整iframe高度的代码
Apr 10 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
Apr 19 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
Aug 15 Javascript
js对象基础实例分析
Jan 13 Javascript
JS中多种方式创建对象详解
Mar 22 Javascript
Vue中的v-cloak使用解读
Mar 27 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
Dec 07 Javascript
Vue Element使用icon图标教程详解(第三方)
Feb 07 Javascript
Vue实现用户自定义字段显示数据的方法
Aug 28 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
Sep 10 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
Apr 29 Javascript
js实现限定范围拖拽的示例
Oct 26 Javascript
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
php 获取一个月第一天与最后一天的代码
2010/05/16 PHP
php笔记之常用文件操作
2010/10/12 PHP
使用Discuz关键词服务器实现PHP中文分词
2014/03/11 PHP
html静态页面调用php文件的方法
2014/11/13 PHP
php常用字符串比较函数实例汇总
2014/11/24 PHP
php的命名空间与自动加载实现方法
2019/08/25 PHP
laravel model 两表联查示例
2019/10/24 PHP
漂亮的提示信息(带箭头)
2007/03/21 Javascript
JScript的条件编译
2007/05/29 Javascript
jQuery在vs2008及js文件中的无智能提示的解决方法
2010/12/30 Javascript
jQuery动态设置form表单的enctype值(实现代码)
2013/07/04 Javascript
JS可以控制样式的名称写法一览
2014/01/16 Javascript
js清理Word格式示例代码
2014/02/13 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
AngularJs IE Compatibility 兼容老版本IE
2016/09/01 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
2016/12/23 Javascript
vue组件发布到npm简单步骤
2017/11/30 Javascript
使用veloticy-ui生成文字动画效果
2018/02/08 Javascript
基于Layui自定义模块的使用方法详解
2019/09/14 Javascript
[48:20]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Django实现的自定义访问日志模块示例
2017/06/23 Python
Python编写Windows Service服务程序
2018/01/04 Python
python opencv实现任意角度的透视变换实例代码
2018/01/12 Python
python实现图书馆研习室自动预约功能
2018/04/27 Python
python pandas时序处理相关功能详解
2019/07/03 Python
django中使用POST方法获取POST数据
2019/08/20 Python
Python Django 前后端分离 API的方法
2019/08/28 Python
3行Python代码实现图像照片抠图和换底色的方法
2019/10/10 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
Python利用matplotlib绘制折线图的新手教程
2020/11/05 Python
俄罗斯药房连锁店:ASNA
2020/06/20 全球购物
大学生入党自我鉴定
2013/10/31 职场文书
个人求职信范文分享
2014/01/06 职场文书
大学班长的职责
2014/01/27 职场文书
县委常委班子对照检查材料思想汇报
2014/09/28 职场文书
三严三实·严以修身心得体会
2016/01/15 职场文书