--@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; } ...
随机推荐
- Android-----View绘制流程以及invalidate()等相关方法分析 .
引自:http://blog.csdn.net/qinjuning/article/details/7110211 前言: 本文是我读<Android内核剖析>第13章----View工作 ...
- mysql连接不上Uncaught exception 'PDOException' with message 'could not find driver
需要给你的PHP加一个PDO扩展打开PHP.INI 把extension=php_pdo.dll 前面的分号去掉 重启APACHE. extension=php_pdo_mysql.dll
- JSP中EL表达式取值问题记录（已解决）
***************************2015-10-28 22:21************************* 问题描述如下: 在当前的jsp页面已经有了如下代码: < ...
- 如何将CAD文件导入到Protel和PADS中
一. 如何把CAD中的板框图纸导入到Protel中? a. 在CAD中单位设置为“毫米”,并做简单的处理,板框图是有合并还是分解都无所谓,另存为R12(*dxf)格式文件. b. 打开DXP,新建PC ...
- Html基础详解
HTML是(Hyper Text Mark-up Language)超文本标记语言,是因特网上应用最为广泛的一种网络传输协议,所有的www文件都必须要遵守这个标准.这样就可以让浏览器根据标记语言的规则 ...
- 同时运行ecstore1.2与ecstore2.0的解决方案
解决方法: php.ini中 zend_loader.license_path指向一个目录,该目录下同时包含两个developer.zl文件,一个是1.2,一个是2.0的. 为了避免俩develope ...
- PAT (Advanced Level) 1079. Total Sales of Supply Chain (25)
树的遍历. #include<cstdio> #include<cstring> #include<cmath> #include<vector> #i ...
- EasyUI中dialog中嵌入form细节问题记录
当代码如下: function myClear() { $("#add_form").form("reset"); $("#add_dialog&qu ...
- MySQL 5.5.x配置文件详解
MySQL 5.5.x my.cnf参数配置优化详解 一直有耳闻MySQL5.5的性能非常NB,所以近期打算测试一下,方便的时候就把bbs.kaoyan.com升级到这个版本的数据库.今天正好看到一篇 ...
- (简单) HUST 1017 Exact cover , DLX+精确覆盖。
Description There is an N*M matrix with only 0s and 1s, (1 <= N,M <= 1000). An exact cover is ...