<!DOCTYPE HTML>
<html ng-app="myapp">
<head>
 <title>综合小实例</title>
 <meta charset="utf-8"> 
 <link rel="stylesheet" href="../css/bootstrap.css">
 <script src="../js/angular.js"></script>
 <style>
 .text-warning{color:red;}
 </style>
</head>
<body>
<!-- 加上模块module,并把控制器写在模块中，控制器生效 -->
<div  ng-controller="limitText" class="container">
 <span ng-class="{'text-warning':showldWarn()}">剩余字数：{{remaining()}} / 140</span>
 <div class="row">
  <textarea ng-model="message" rows="20" class="col-md-6"></textarea><br>
  输入的是：<span ng-bind="message"></span>
 </div>
 <div class="row">
  <button class="btn btn-default" ng-click="send()" ng-disabled="!hasValidLength()">发送</button>
  <button class="btn btn-default" ng-click="clear()">清除</button>
 </div>
</div>
<script>
var myModule = angular.module("myapp",[]);
myModule.controller('limitText', ['$scope', function($scope){
 var MAX_LEN = 140;
 $scope.message = "ahsdhiasdh";
 $scope.remaining = function(){                               //返回剩余字数方法
  return MAX_LEN - $scope.message.length;
 }
 $scope.showldWarn = function(){                           //返回差值小于10的判断条件，满足该条件时调用字体标红的样式
  var chazhi = MAX_LEN - $scope.message.length;
  return chazhi < 10;
 }
 $scope.hasValidLength = function(){                       //返回文本长度在有效范围内的方法
  return $scope.message.length <= MAX_LEN;
 }
}])
</script>
</body>
</html>

最新文章

  1. “为什么DirectX里表示三维坐标要建一个4*4的矩阵？”
  2. Spark SQL 之 Data Sources
  3. 【转】使用Reflector和FileDisassembler反编译成项目文件
  4. ubuntu12.04+proftpd1.3.4a的系统用户+虚拟用户权限应用实践
  5. bt协议详解 DHT篇（下）
  6. swift app中展示折线图, 饼状图, 柱状图等数据图表
  7. RPi 2B SD read-only filesytem
  8. jQuery事件绑定方法bind、 live、delegate和on的区别
  9. HttpGet协议与正则表达
  10. IOS系统配置FFMEPG
  11. 使用 C# 代码实现拓扑排序
  12. 2017-11-4&mdash;稳态和暂态/瞬态（对运放积分电路的思考）[待仿真]
  13. 今天我碰到了由于web.xml文件表头信息导致润乾报表启动失败的问题，解决方案如下
  14. HDU 4648 Magic Pen 6 （。。。。。。。。。。）
  15. 转：安装Chrome不成功,显示代码为“0xa0430721”的解决办法
  16. es6之扩展运算符 三个点（...）
  17. [GO]channel实现同步
  18. js中一切都是对象
  19. SQL学习（时间，存储过程，触发器）
  20. map写数据到本地磁盘过程解析----spill和merge

热门文章

  1. RocketMQ源码 — 三、 Producer消息发送过程
  2. make[1]: *** [/workopenwrt/trunk/staging_dir/target-mipsel_24kec+dsp_uClibc-0.9.33.2/stamp/.tools_install_nnnnn] Error 2 make[1]: Leaving directory `/work/openwrt/trunk&#39; make: *** [world]
  3. 关于struts2的web.xml配置
  4. js学习之函数
  5. Spring的5种事物配置方式
  6. redis sentinel 集群监控 配置
  7. (中等) POJ 1084 Square Destroyer , DLX+可重复覆盖。
  8. The account &#39;...&#39; is no team with ID &#39;...&#39;
  9. Jsp属性范围
  10. S3C2440的定时器详解