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数组的扩展实现代码集合
Jun 01 Javascript
Javascript学习笔记2 函数
Jan 11 Javascript
js换图片效果可进行定时操作
Jun 09 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
Oct 10 Javascript
javascript如何操作HTML下拉列表标签
Aug 20 Javascript
第五章之BootStrap 栅格系统
Apr 25 Javascript
JS实现的适合做faq或menu滑动效果示例
Nov 17 Javascript
js微信支付实现代码
Dec 22 Javascript
微信小程序中使用javascript 回调函数
May 11 Javascript
微信小程序动态显示项目倒计时效果
Jun 13 Javascript
element的el-table中记录滚动条位置的示例代码
Nov 06 Javascript
开发一个封装iframe的vue组件
Mar 29 Vue.js
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
微信自定义菜单的处理开发示例
2015/04/16 PHP
yii2.0框架多模型操作示例【添加/修改/删除】
2020/04/13 PHP
javascript Demo模态窗口
2009/12/06 Javascript
需要做特殊处理的DOM元素属性的访问
2010/11/05 Javascript
利用js实现选项卡的特别效果的实例
2013/03/03 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
2013/11/13 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
2013/11/14 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
2015/06/08 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
JS实现的表格行鼠标点击高亮效果代码
2015/11/27 Javascript
js实现密码强度检测【附示例】
2016/03/30 Javascript
给easyui datebox扩展一个清空的实例
2016/11/09 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
vue中实现methods一个方法调用另外一个方法
2018/02/08 Javascript
Angular父组件调用子组件的方法
2018/04/02 Javascript
vue实现组件之间传值功能示例
2018/07/13 Javascript
js中split()方法得到的数组长度问题
2018/07/19 Javascript
详解Eslint 配置及规则说明
2018/09/10 Javascript
Angular4 Select选择改变事件的方法
2018/10/09 Javascript
jsonp实现百度下拉框功能的方法分析
2019/05/10 Javascript
python多继承(钻石继承)问题和解决方法简单示例
2019/10/21 Python
python加载自定义词典实例
2019/12/06 Python
PyCharm 无法 import pandas 程序卡住的解决方式
2020/03/09 Python
详解查看Python解释器路径的两种方式
2020/10/15 Python
Trip.com澳大利亚:在线旅行社
2019/12/01 全球购物
英国领先的电动可调床制造商:Laybrook
2019/12/26 全球购物
美术专业学生个人自我评价
2013/09/19 职场文书
技校生自我鉴定
2013/12/08 职场文书
二年级评语大全
2014/04/23 职场文书
甜品蛋糕店创业计划书
2014/09/21 职场文书
房地产销售主管岗位职责
2015/02/13 职场文书
运动会通讯稿300字
2015/07/20 职场文书
2016银行求职自荐信
2016/01/28 职场文书
《水浒传》读后感3篇(范文)
2019/09/19 职场文书
微信小程序实现聊天室功能
2021/06/14 Javascript
尝试使用Python爬取城市租房信息
2022/04/12 Python