--@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; } ...
随机推荐
- Git 学习资源
在线教程 Try Git: Git初学者绝不能错过的Git上手资源. 廖雪峰Git教程: 比较系统的中文在线教程 易百Git教程 : 另一个比较全的中文在线教程 Git Immersion : A V ...
- 同时运行ecstore1.2与ecstore2.0的解决方案
解决方法: php.ini中 zend_loader.license_path指向一个目录,该目录下同时包含两个developer.zl文件,一个是1.2,一个是2.0的. 为了避免俩develope ...
- C#使用FFmpeg 将视频格式转换成MP4示例
一.常用视频格式分辨率 640x480p 720p格式,分辨率为1280×720p / 60Hz,行频为45kHz 1080p格式,分辨率为1920×1080逐行扫描,专业格式 二.FFmpeg部分参 ...
- (中等) Hiho 1232 Couple Trees(15年北京网络赛F题)，主席树+树链剖分。
"Couple Trees" are two trees, a husband tree and a wife tree. They are named because they ...
- boost库使用说明
1 下载安装 2 编译的时候,需要添加头文件和链接对应的库
- spring mvc获取路径参数的几种方式 - 浅夏的个人空间 - 开源中国社区
body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...
- 日志文件 统计 网站PV IP
1. 安装rrdtool yum install rrdtool 2. 创建 rrdtool 数据库 rrdtool create /opt/local/rrdtool/jicki.rrd -s 30 ...
- PHP 正则函数
在PHP中有两套正则表达式函数库.一套是由PCRE(Perl Compatible Regular Expression)库提供的.PCRE库使用和Perl相同的语法规则实现了正则表达式的模式匹配,其 ...
- MySQL create table 语法
MySQL中create table语句的基本语法是: CREATE [TEMPORARY] TABLE [IF NOT EXISTS] tbl_name [(create_definitio ...
- ZOJ 3780 Paint the Grid Again
拓扑排序.2014浙江省赛题. 先看行: 如果这行没有黑色,那么这个行操作肯定不操作. 如果这行全是黑色,那么看每一列,如果列上有白色,那么这一列连一条边到这一行,代表这一列画完才画那一行 如果不全是 ...