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

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

rush:js;">

</p>
<p>100/<span ng-bind="left()"></span></p>
</div>
</html>
<script type="text/javascript">
var app=angular.module("myNoteApp",[]);
app.controller("myNoteCtrl",function($s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e){
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.message = "";
//<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>变更<a href="https://www.jb51.cc/tag/shuliang/" target="_blank" class="keywords">数量</a>
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.left = function() {return 100 - $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.message.length;};
//清除文本框
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.clear = function() {$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.message = "";};
//执行保存操作
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.save = function() {alert("Note Saved");};
});
</script>
</body></pre>
</div>
<p>备注：
</p>
<p>如果在同<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>表单中有多个“textarea”可以通过定义多个“ng-model”来控制
</p>
<p>如果在不同的表单中操作不同的”textarea“ ，可以通过定义多个“ng-controller”来控制
</p>
<p>但不管何种情况，如果在同<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a><a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>中，同<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>body中最好只使用<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>”ng-app“</p>
<p><h3>补充：Angular JS 中的 <textarea><a href="https://www.jb51.cc/tag/yongfa/" target="_blank" class="keywords">用法</a></h3></p>
<p>最近测试用把 textarea 中的值传往<a href="https://www.jb51.cc/tag/houtai/" target="_blank" class="keywords">后台</a>传，不过<a href="https://www.jb51.cc/tag/houtai/" target="_blank" class="keywords">后台</a>收不到，<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>是这样写的：</p>
<div class="jb51code">
<pre class="b<a href="https://www.jb51.cc/tag/rush/" target="_blank" class="keywords">rush</a>:js;">
<textarea rows="15" ng-model="notice.content" style="width:65%">{{ notice.content }}

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

rush:js;">

</pre>
</div><div class="topcard-tags"><a href="https://m.jb51.cc/tag/angularjstextarea/" class="tag_link" target="_blank">angularjs_textarea</a><a href="https://m.jb51.cc/tag/angularjstextareashuruzifu/" class="tag_link" target="_blank">angularjs_textarea输入字符</a></div>
                </div>
              </div>
          </div>
            
            <div class="clearfix"></div>

            <div class="col-sm-12 col-md-12 col-lg-12">
              <div class="card">
                <div class="title"><h1>相关文章</h1></div><div class="list_con">
                <img src="https://m.jb51.cc/res/2024/09-25/18/879e7ec08a36083a57dfc8b44214469d.gif" width="100" height="64" style="float:right;margin-left:20px;" />
              <div class="title">
                <a href="https://m.jb51.cc/js/4742335.html" title="自定义web弹窗/层：简易风格的msg与可拖放的dialog，生成博客园文章目录弹窗">自定义web弹窗/层：简易风格的msg与可拖放的dialog，生成博客园文章目录弹窗</a>
              </div>
              <div class="summary">前言 做过web项目开发的人对layer弹层组件肯定不陌生，作为l...</div>
            </div><div class="list_con">
                <img src="https://m.jb51.cc/res/2024/09-25/18/84bd76d88488cafdfb2789b5a991fecf.png" width="100" height="64" style="float:right;margin-left:20px;" />
              <div class="title">
                <a href="https://m.jb51.cc/js/4742334.html" title="nice-validator表单验证插件的简单使用">nice-validator表单验证插件的简单使用</a>
              </div>
              <div class="summary">前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...</div>
            </div><div class="list_con">
                <img src="https://m.jb51.cc/res/2024/09-25/18/cf659cff914621d918c6072273c30973.gif" width="100" height="64" style="float:right;margin-left:20px;" />
              <div class="title">
                <a href="https://m.jb51.cc/js/4742333.html" title="基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现">基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现</a>
              </div>
              <div class="summary">前言 图片上传是web项目常见的需求，我基于之前的博客的代码...</div>
            </div><div class="list_con">
                <img src="https://m.jb51.cc/res/2024/09-25/18/02f80db4fdf55f3a24674e2854e018f2.png" width="100" height="64" style="float:right;margin-left:20px;" />
              <div class="title">
                <a href="https://m.jb51.cc/js/4742332.html" title="踹掉后端，前端导出Excel！">踹掉后端，前端导出Excel！</a>
              </div>
              <div class="summary">前言 导出Excel文件这个功能，通常都是在后端实现返回前端一...</div>
            </div><div class="list_con">
                <img src="https://m.jb51.cc/res/2024/09-25/18/db8dce1453ed09a8230451f2a9fcdc68.png" width="100" height="64" style="float:right;margin-left:20px;" />
              <div class="title">
                <a href="https://m.jb51.cc/js/4742331.html" title="Web Worker——js的多线程，实现统计博客园总阅读量、总评论量、总推荐量">Web Worker——js的多线程，实现统计博客园总阅读量、总评论量、总推荐量</a>
              </div>
              <div class="summary">前言 众所周知，js是单线程的，从上往下，从左往右依次执行，...</div>
            </div><div class="list_con">
                <img src="https://m.jb51.cc/res/2024/09-25/18/1cd1c972ce822d1a99b7d1b2c8f9cfcd.png" width="100" height="64" style="float:right;margin-left:20px;" />
              <div class="title">
                <a href="https://m.jb51.cc/js/4742330.html" title="select标签 禁止选择但又能通过序列化form表单传值到后台">select标签 禁止选择但又能通过序列化form表单传值到后台</a>
              </div>
              <div class="summary">前言 项目开发中，我们可能会碰到这样的需求：select标签，禁...</div>
            </div></div>
            </div>
           
        </div>
      </div>
    <footer id="footer">
    <div class="container">
        <div class="copyright">
            Copyright © 2018 编程之家. 当前版本 V7.0.16<br>
            <span class="ml5">编程之家 版权所有 
            <a href="https://beian.miit.gov.cn/"  target="_blank"  rel="nofollow">闽ICP备13020303号-8</a>
        </div>
    </div>
</footer>
<script>
(function () {
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        }
        else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>
<script src="https://m.jb51.cc/js/count.js"></script>
  </body>
</html>