angular指令深度学习篇
angular指令深度学习-过滤器
limitTo
...
<body ng-app="app" >
<div ng-controller="myCtr">
{{data|limitTo:2:1}} <!-- 第一个参数表示截取几位，第二个参数表示从第几位截取 -->
...
angular.module("app", [])
.controller("myCtr", ["$scope",function($scope){
$scope.data='中华人名共和国万岁，打倒小日本！';
}])
由上述代码片段不难看出结果：华人。
number
...
{{data|number}} <!-- 将data转化为数字 -->
...
$scope.data = 99.99;
...
currency
...
{{data|currency}} <!-- 将data转化为货币 -->
...
$scope.data = 99.99;
...
lowercase、uppercase
...
{{data|lowercase|uppercase}} <!-- 将data转化为小写后再转化为大写 -->
...
$scope.data = hello kity;
...
date
...
{{time|date:'yyyy-MM-dd HH-mm-ss'}}<!-- 将time时间转化格式 -->
...
$scope.time = new Date().getTime();
...
orderBy
...
{{arr|orderBy:'id':true}} <!-- 将arr数组按照id进行排序，参数true为倒序，默认为false，升序 -->
...
$scope.arr = [
{id:1,name:'刘恺威',title:'飞刀又见飞刀'},
{id:2,name:'王凯',title:'陈乔恩'},
{id:3,name:'张艺谋',title:'长城'}
]
...
filter
...
{{arr|filter:'刘恺威':true}} <!-- 将arr数组中含有'刘恺威'的元素过滤出来，参数true为完全一致过滤，默认为false，不需要完全一致即可实现过滤 -->
...
$scope.arr = [
{id:1,name:'刘恺威',title:'飞刀又见飞刀'},
{id:2,name:'王凯',title:'陈乔恩'},
{id:3,name:'张艺谋',title:'长城'}
]
...
orderBy实例
点击表格标题时，表格内容会根据id|name|title进行排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤器</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body ng-app="app" >
<div ng-controller="myCtr">
<table border='1'>
<tr>
<th ng-click="ol('id')">UID
<span ng-if="!status.id">升序</span>
<span ng-if="status.id">降序</span>
</th>
<th ng-click="ol('name')">name</th>
<th ng-click="ol('title')">title</th>
</tr>
<tr ng-repeat="(k,v) in data">
<td >{{v.id}}</td>
<td >{{v.name}}</td>
<td >{{v.title}}</td>
</tr>
</table>
</div>
<script src="http://cdn.bootcss.com/angular.js/2.0.0-beta.17/angular2.min.js"></script>
<script>
angular.module("app", [])
.controller("myCtr", ["$scope","$filter",function($scope,$filter){
$scope.data=[
{id:1,name:'刘恺威',title:'飞刀又见飞刀'},
{id:2,name:'王凯',title:'陈乔恩'},
{id:3,name:'张艺谋',title:'长城'}
];
$scope.status={id:false,name:false,title:false}; //定义一个变量，便于下面使用
$scope.ol = function(filed){
// if(arguments.callee[filed]==undefined){ //callee的作用时定义一个不会释放的变量，功能同上
// arguments.callee[filed]=false;
// }
// arguments.callee[filed]=!arguments.callee[filed];
$scope.status[filed]=!$scope.status[filed]; //通过这个操作，使得每次点击表格内容都会反排序
$scope.arr = $filter('orderBy')($scope.arr,filed,$scope.status[filed]);//第一个括弧里放过滤器，第二个放要过滤的对象、过滤的条件、倒序还是升序
}
}])
</script>
</body>
</html>
自定义过滤器
实现将手机号后面相应位数替换为*
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤器</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body ng-app="app" >
<div ng-controller="myCtr">
<table border=1>
<tr>
<th>UID</th>
<th>姓名</th>
<th>电话</th>
</tr>
<tr ng-repeat="(k,v) in data">
<td>{{v.id}}</td>
<td>{{v.name}}</td>
<td>{{v.mobile|trucate:3}}</td>
</tr>
</table>
</div>
<script src="http://cdn.bootcss.com/angular.js/2.0.0-beta.17/angular2.min.js"></script>
<script>
angular.module("app", [])
.controller("myCtr", ["$scope","$filter",function($scope,$filter){
$scope.data=[
{id:1,name:'刘恺威',mobile:'13590043280'},
{id:2,name:'王凯',mobile:'15920576439'},
{id:3,name:'张艺谋',mobile:'18739025667'}
]
}])
.filter('trucate', function(){
return function(mobile,len){
len = len?len:2;
return mobile.substr(0,6-len)+new String('*').repeat(len);
}
});
</script>
</body>
</html>
angular事件监听$watch
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤器</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body ng-app="app" >
<div ng-controller="myCtr">
<input type="text" ng-model="title">{{error}}
<input type="text" ng-model="obj.title">{{error1}}
</div>
<script src="http://cdn.bootcss.com/angular.js/2.0.0-beta.17/angular2.min.js"></script>
<script>
angular.module("app", [])
.controller("myCtr", ["$scope","$filter",function($scope,$filter){
//监听变量
$scope.title='';
$scope.$watch('title',function(n,o){
$scope.error = n.length>3?'长度不能超过3位':'';//n为用户输入的新数据
})
//监听对象
$scope.obj={title:''};
$scope.$watch('obj',function(n,o){
$scope.error1 = n.title.length>3?'长度不能超过3位':'';
},true) //监听对象时，一定要加true
$scope.list=$scope.arr;
$scope.$watch('search',function(n,o){
$scope.list = $filter('filter')($scope.arr,n);
});
}])
</script>
</body>
</html>
$watch查询案例
通过再搜索框内输入与表格内容匹配的值，过滤出我们想要的项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤器</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body ng-app="app" >
<div ng-controller="myCtr">
搜索：<input type="text" ng-model="search">
<table border=1>
<tr>
<th>UID</th>
<th>姓名</th>
<th>电话</th>
</tr>
<tr ng-repeat="(k,v) in data">
<td>{{v.id}}</td>
<td>{{v.name}}</td>
<td>{{v.mobile}}</td>
</tr>
</table>
</div>
<script src="http://cdn.bootcss.com/angular.js/2.0.0-beta.17/angular2.min.js"></script>
<script>
angular.module("app", [])
.controller("myCtr", ["$scope","$filter",function($scope,$filter){
angular.module("app", [])
$scope.data=[
{id:1,name:'刘恺威',mobile:'13590043280'},
{id:2,name:'王凯',mobile:'15920576439'},
{id:3,name:'张艺谋',mobile:'18739025667'}
]
}])
$scope.list=$scope.data;
$scope.$watch('search',function(n,o){
$scope.list = $filter('filter')($scope.arr,n);
});
}])
</script>
</body>
</html>
angular指令深度学习篇的更多相关文章
- 深度学习篇——Tensorflow配置（傻瓜安装模式）
前言 如果你是一个完美主义者,那么请绕过此文,请参考<深度学习篇——Tensorflow配置(完美主义模式)> 安装 pip install tensorflow ok,只要不报错,安装就 ...
- 【深度学习篇】---CNN和RNN结合与对比，实例讲解
一.前述 CNN和RNN几乎占据着深度学习的半壁江山,所以本文将着重讲解CNN+RNN的各种组合方式,以及CNN和RNN的对比. 二.CNN与RNN对比 1.CNN卷积神经网络与RNN递归神经网络直观 ...
- 【深度学习篇】--神经网络中的调优一，超参数调优和Early_Stopping
一.前述 调优对于模型训练速度,准确率方面至关重要,所以本文对神经网络中的调优做一个总结. 二.神经网络超参数调优 1.适当调整隐藏层数对于许多问题,你可以开始只用一个隐藏层,就可以获得不错的结果,比 ...
- 深度学习篇——Tensorflow-GPU配置
tensoflow-gpu安装 对于python 3.5和3.6的童鞋们而言,安装tensorflow其实并不难,因为我们可以通过pip直接安装. 不过,第一要求你安装的python是64位的,如下图 ...
- 【深度学习篇】--Windows 64下tensorflow-gpu安装到应用
一.前述 一直以为自己的笔记本不支持tensflow-gpu的运行,结果每次运行模型都要好久.偶然间一个想法,想试试自己的笔记本,结果竟然神奇的发现能用GPU.于是分享一下安装步骤. 二.具体 因为版 ...
- 【深度学习篇】--神经网络中的池化层和CNN架构模型
一.前述 本文讲述池化层和经典神经网络中的架构模型. 二.池化Pooling 1.目标 降采样subsample,shrink(浓缩),减少计算负荷,减少内存使用,参数数量减少(也可防止过拟合)减少输 ...
- Nginx详解二十三：Nginx深度学习篇之Nginx+Lua开发环境搭建
Nginx+Lua开发环境 1.下载LuaJIT解释器wget http://luajit.org/download/LuaJIT-2.0.2.tar.gztar -zxvf LuaJIT-2.0.2 ...
- 【深度学习篇】--Seq2Seq模型从初识到应用
一.前述 架构: 问题: 1.压缩会损失信息 2.长度会影响准确率 解决办法: Attention机制:聚焦模式 “高分辨率”聚焦在图片的某个特定区域并以“低分辨率”,感知图像的周边区域的模式.通过大 ...
- Nginx详解二十四：Nginx深度学习篇之灰度发布
实战场景 - 灰度发布 灰度发布的作用:按照一定的关系区别,分部分的代码进行上线,使代码的发布能平滑过渡上线实现方式: 1.用户的信息cookie等信息区别 2.根据用户的IP地址 安装memcach ...
随机推荐
- SQL Server快捷键
SQL Server快捷键 金刚 SQL Server 快捷键 自己汇总的键盘操作快捷键 F7 切换到对象资源管理器 F5 执行T-Sql语句 F6 跳转到列属性 Alt+Enter 表属性 其实还有 ...
- 谈谈yii2-GridView如何实现列表页直接修改数据
作者:白狼 出处:http://www.manks.top/yii2_gridview_advanced.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原 ...
- Maven基础配置—本地Maven配置
1.下载客户端 通过http://maven.apache.org/download.cgi#下载Maven本地客户端. 我下载的是apache-maven-3.2.5-bin.zip,在D盘解压. ...
- RMAN异机恢复遭遇ORA-01547、ORA-01152、ORA-01110错误案例
测试环境: 操作系统 : Red Hat Enterprise Linux ES release 4 (Nahant Update 4) VMWARE 数据库 : O ...
- RMAN还原32位数据库到64位实例的错误处理
将ORACLE 10g 32bit数据库还原到测试机ORACLE 10g 64bit的数据库实例上, 还原.恢复数据库后,使用open resetlogs打开数据库后,发现警告日志里面有ORA-120 ...
- Linux忘记root密码怎么办？
开篇前言:Linux系统的root账号是非常重要的一个账号,也是权限最大的一个账号,但是有时候忘了root密码怎么办?总不能重装系统吧,这个是下下策,其实Linux系统中,如果忘记了root账号密码, ...
- SQL SERVER作业的Schedules浅析
SQL SERVER作业的计划(Schedules),如果你没仔细研究过或没有应用一些复杂的计划(Schedules),那么你觉得SQL SERVER作业的计划(Schedules)非常好用,也没啥问 ...
- SQL SERVER中的OLEDB等待事件
OLEDB等待事件介绍 OLEDB等待类型是SQL SERVER 数据库中最常见的几种等待类型之一.它意味着某个会话(SPID)通过SQL Server Native Client OLEDB Pro ...
- javascript-观察者模式
观察者模式方法 1.称之为消息机制或发布-订阅者模式 2.定义了一种依赖关系解决了主体对象与观察者之间功能的耦合 观察者方法 //将观察者放在闭包中,当页面加载就立即执行 var Observ ...
- 关于datetime 和 int 之间相互转换
在其他地方看到一个有点意思的东西.是记录转换规则的. DECLARE @Date1 DATETIME = '2016-06-21 11:53:00' , @Date2 DATETIME = '2016 ...