--@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; } ...
随机推荐
- 1084:XX开公司<回溯>
Description 2020年,xx开了一家拥有N个员工的大公司.每天,xx都要分配N项工作给他的员工,但是,由于能力的不同,每个人对处理相同工作所需要的时间有快有慢.众所周知,xx是一个非常重视 ...
- 集合-字典（Dictionary）
字典(散列表):允许按照某个键来访问元素,能根据键快速查找元素,也可以自由添加,删除元素.比较像List<T>类,但没有list向后移动元素的性能开销. .net中最主要的字典类是Dict ...
- ExtJS简介--车辆调度
http://www.cnblogs.com/gaoweipeng/archive/2009/11/11/1599969.html
- java工程师联通XX面试题目
什么是“长连接”和“短连接”? 所谓短连接指建立SOCKET连接后发送后接收完数据后马上断开连接,一般银行都使用短连接解释2长连接就是指在基于tcp的通讯中,一直保持连接,不管当前是否发送或者接收数据 ...
- 自动化运维 Ansible
自动化运维 Ansible 特性 (1).no agents:不需要在被管控主机上安装任何客户端: (2).no server:无服务器端,使用时直接运行命令即可: (3).modules in an ...
- HTML 5终于定稿，八年后我们再一次谈谈怎么改变世界
我们第一次谈论 HTML5 要改变世界大概是因为乔布斯,他坚持在 iOS 上不兼容 Flash,在 Adobe 统治多媒体开发的那个年代,这需要付出极大的勇气.这么多年过去了,虽然所有人都在谈论 HT ...
- mysql优化———第二篇：数据库优化调整参数
摘要 参数调优内容: 1. 内存利用方面 2. 日志控制方面 3.文件IO分配,空间占用方面 4. 其它相关参数 一 摘要 通过参数提高MYSQL的性能.核心思想如下: 1 提高my ...
- set multiset 集合实现众数的统计
众数问题 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述 所谓众数,就是对于给定的含有N个元素的多重集合,每个元素在S中出现次数最多的成为该元素的重数, 多重集合S重 ...
- mysql 查找重复的数据
Select Name,Count(*) From A Group By Name Having Count(*) > 1 Name是字段
- ZOJ 3331 Process the Tasks
双塔DP. #include<cstdio> #include<cstring> #include<queue> #include<string> #i ...