--@angularJS--综合小实例1
<!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>
--@angularJS--综合小实例1的更多相关文章
- --@angularJS--较复杂的指令嵌套demo——综合小实例：登陆界面
1.index.html: <!DOCTYPE HTML><html ng-app="app"><head> <title>c ...
- spring+mybatis之声明式事务管理初识(小实例)
前几篇的文章都只是初步学习spring和mybatis框架,所写的实例也都非常简单,所进行的数据访问控制也都很简单,没有加入事务管理.这篇文章将初步接触事务管理. 1.事务管理 理解事务管理之前,先通 ...
- Vue 2.x指令综合小练习
实现效果如下: 代码实现如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- winform 异步读取数据 小实例
这几天对突然对委托事件,异步编程产生了兴趣,大量阅读前辈们的代码后自己总结了一下. 主要是实现 DataTable的导入导出,当然可以模拟从数据库读取大量数据,这可能需要一定的时间,然后 再把数据导入 ...
- 带你走近AngularJS - 体验指令实例
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...
- angularjs的resource实例对象
angularjs的resource实例对象 我们看看都有啥 而直接使用service对象的时候没有前面这些$
- CSS应用内容补充及小实例
一.clear 清除浮动 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- Objective-C之代理设计模式小实例
*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...
- Objective-C之@类别小实例
*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...
随机推荐
- HDU 3183 A Magic Lamp（二维RMQ）
第一种做法是贪心做法,只要前面的数比后面的大就把他删掉,这种做法是正确的,也比较好理解,这里就不说了,我比较想说一下ST算法,RMQ的应用 主要是返回数组的下标,RMQ要改成<=(这里是个坑点, ...
- XML简单的增改删操作
XML文件的简单增改删,每一个都可以单独拿出来使用. 新创建XML文件,<?xmlversion="1.0"encoding="utf-8"?> & ...
- Sping中的IOC四种注解的简单记录
@Component 通用注解,不推荐使用,要用的话,任何类的头上都能使用,但是这个类到底是干嘛用得就不知道了. @Controller 控制层使用,也就是MVC中的C,主要的时候使用的时候注意配合@ ...
- C#平衡树（AVLTree）
参考:http://www.cnblogs.com/skywang12345/p/3577479.html using System; using System.Collections.Generic ...
- bi api 软件
https://www.interactivebrokers.com.hk/cn/index.php?f=5234&ns=T
- CentOS 6.4 x64 zabbix 2.2.2 编译安装
A. 服务端安装配置 1.下载zabbix 2.x 最新版本 http://www.zabbix.com/download.php 2.安装配置所需要软件(zabbix需要一个lamp环境) 使用 y ...
- (简单) POJ 2352 Stars，Treap。
Description Astronomers often examine star maps where stars are represented by points on a plane and ...
- hibernate---一级缓存, 二级缓存, 查询缓存
缓存: 内存开辟一块空间,把本来存在硬盘的东西放在内存里, 以后从内存读取. 一级缓存: session级别的缓存, session.load 二级缓存: 总的缓存.
- WINDOWS动态链接库--MFC规则动态链接库
第一代window程序员使用windows api进行编程,到了后来,微软推出MFC类库,于是,动态链接库进行了升级,可以在动态连接库中使用MFC的API,这就叫做MFC动态链接库, 其中MFC动态链 ...
- Android SQLite 加密模块实现入门
安卓的安全性那是众所周知,最近学习安卓apk反编译,发现某些即时通讯软件都封装了自己独立使用的数据库模块(从framework java/C++ 一直到底层的SQLite的C库), 为了防止被root ...