--@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; } ...
随机推荐
- 细菌(disease)
细菌(disease) 题目描述 近期,农场出现了D(1≤D≤15)种细菌.John要从他的N(1≤N≤1000)头奶牛中尽可能多地选些产奶,但是如果选中的奶牛携带了超过K(1≤K≤D)种不同细菌,所 ...
- 进程waitpid()的用法
代码分析: /* waitpid.c */ #include <sys/types.h> #include <sys/wait.h> #include <unistd.h ...
- FZU 2144 Shooting Game（数学+贪心）
主要思路:求出蚊子到达球的时间区间(用方程得解),对区间做一个贪心的选择,选择尽可能多的区间有交集的区间段(结构体排序即可),然后计数. #include <cstdio> #includ ...
- Windows Server 2012 在个人终端上使用的推荐设置
Windows Server 2012,也就是 Windows 8 的服务器版本,相对于 Windows 8 企业版而言,增强了作为服务器的功能,弱化了作为终端系统的功能. 目前微软官方提供了 Win ...
- js 中调用 Object.prototype.toString()来检测对象的类型
1.使用toString()方法来检测对象类型 可以通过toString() 来获取每个对象的类型.为了每个对象都能通过 Object.prototype.toString() 来检测,需要以 Fun ...
- SQL面试题——查询课程
题目: 成绩表(Grade),包含字段:GradeID(Int,自增), SNO(int, 学号), CNO(int, 课程号), Score(float,分数) 查询每门课程的平均(最高/最低)分及 ...
- Spring第一个例子的补充
1.首先导入需要的包: 2.文件结构: 3.先看xml配置文件: <?xml version="1.0" encoding="UTF-8"?> &l ...
- Openlayers修改矢量要素
将以下代码放到demo下examples中即可运行 <!DOCTYPE html><html> <head> <meta http-equiv="C ...
- SpringMVC和mybatis的框架
1.首先以一个项目做例子,该项目用到的框架即为SpringMVC+mybatis,项目环境为MyEclipse+sqlserver+tomcat6,项目的地址(项目+数据库备份文件)大家可以上我的百度 ...
- TCP/IP协议头部结构体（网摘小结）（转）
源:TCP/IP协议头部结构体(网摘小结) TCP/IP协议头部结构体(转) 网络协议结构体定义 // i386 is little_endian. #ifndef LITTLE_ENDIAN #de ...