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 相关文章推荐
js 函数调用模式小结
Dec 26 Javascript
函数式 JavaScript(一)简介
Jul 07 Javascript
JS实现的添加弹出层并完成锁屏操作示例
Apr 07 Javascript
Vue原理剖析 实现双向绑定MVVM
May 03 Javascript
详解Vue整合axios的实例代码
Jun 21 Javascript
详解AngularJS ng-class样式切换
Jun 27 Javascript
jquery ztree实现右键收藏功能
Nov 20 jQuery
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
Aug 25 Javascript
原生JS实现简单的无缝自动轮播效果
Sep 26 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
Apr 09 Javascript
taro开发微信小程序的实践
May 21 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
Apr 07 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内置函数生成随机数实例
2019/01/18 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
laravel框架学习笔记之组件化开发实现方法
2020/02/01 PHP
js实现DIV的一些简单控制
2007/06/04 Javascript
50个比较实用jQuery代码段
2011/09/18 Javascript
js判断样式className同时增加class或删除class
2013/01/30 Javascript
EditPlus注册码生成器(js代码实现)
2013/03/25 Javascript
jquery+正则实现统一的表单验证
2015/09/20 Javascript
jQuery表单事件实例代码分享
2016/08/18 Javascript
Bootstrap组合上、下拉框简单实现代码
2017/03/06 Javascript
ES6新增数据结构WeakSet的用法详解
2017/08/07 Javascript
详解如何优雅地在React项目中使用Redux
2017/12/28 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
2019/03/13 jQuery
JS中循环遍历数组的四种方式总结
2021/01/23 Javascript
跟老齐学Python之用while来循环
2014/10/02 Python
windows下ipython的安装与使用详解
2016/10/20 Python
python通过getopt模块如何获取执行的命令参数详解
2017/12/29 Python
python 对多个csv文件分别进行处理的方法
2019/01/07 Python
Python数据类型之Set集合实例详解
2019/05/07 Python
Django REST Framework序列化外键获取外键的值方法
2019/07/26 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
python3应用windows api对后台程序窗口及桌面截图并保存的方法
2019/08/27 Python
浅谈django url请求与数据库连接池的共享问题
2019/08/29 Python
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法
2020/06/10 Python
python Tornado框架的使用示例
2020/10/19 Python
Python try except else使用详解
2021/01/12 Python
详解css3中 text-fill-color属性
2019/07/08 HTML / CSS
教你如何一步一步用Canvas写一个贪吃蛇
2018/10/22 HTML / CSS
《鹬蚌相争》教学反思
2014/04/22 职场文书
人民调解员先进事迹材料
2014/05/08 职场文书
老干部工作先进集体事迹材料
2014/05/21 职场文书
政协会议宣传标语
2014/10/09 职场文书
2015年幼儿园班主任个人工作总结
2015/10/22 职场文书
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python
python实现求纯色彩图像的边框
2021/04/08 Python
python实现学生信息管理系统(面向对象)
2022/06/05 Python