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 ...
随机推荐
- android 内存溢出与内存泄露
内存溢出就是软件运行需要的内存,超出了java虚拟机给他分配的可用的最大内存 内存泄露就是在缓存图片文字等等的时候,没有关闭流所导致的内存泄露
- JVM-内存管理
都说搞C的牛叉,那是因为C解决问题,全靠程序员自己,他们对自己的程序在内存中是什么样了如指掌.而Java呢不需要有太多操作系统的知识,不用时刻注意内存的问题,但这不代表我们就不用去了解它背后的原理.J ...
- Linux命令学习总结：date命令
命令简介: date 根据给定格式显示日期或设置系统日期时间.print or set the system date and time 指令所在路径:/bin/date 命令语法: date [OP ...
- Android：开发环境搭建相关问题
1.Android.ADT.SDK概念与关系 SDK:Software Development Kit,中文意思是“软件开发工具包”.这是一个覆盖面相当广泛的名词,可以这么说:辅助开发某一类软件的相关 ...
- Oracle转移数据表空间存储位置
问题描述:Oracle表空间创建到了C盘,发现C盘的空间不够,现在将表空间的文件转移到D盘下. 操作方法: 1. 先登录sqlplus,登录用户.在cmd中输入:sqlplus /nologSQL&g ...
- 用python pickle库来存储数据对象
pickling有一个更常用的叫法是serialization,它是指把python对象转化成字节流byte stream, unpickling就是把byte stream转换成对象.python的 ...
- XML通过XSL格式化的那点事(XML到自定义节点折叠显示)
引言 有时我们想看下系统生成的XML文件(如XML格式的Project文件),如果文件结构简单,我们浏览器看起来还比较方便,但是随着XML schema复杂后就变得让人头疼啦,单独写一个程序去做展现又 ...
- EF with (LocalDb)V11.0
EF虽说对LocalDb支持的不错,但LocalDb有自身的缺陷(不想sqlite那样数据库文件可以像普通文件一样使用). LocalDb在一个计算机上会对数据库有唯一性约束,要求本机的localdb ...
- Netruon 理解（11）：使用 NAT 将 Linux network namespace 连接外网
学习 Neutron 系列文章: (1)Neutron 所实现的虚拟化网络 (2)Neutron OpenvSwitch + VLAN 虚拟网络 (3)Neutron OpenvSwitch + GR ...
- 浅谈Tuple之C#4.0新特性那些事儿你还记得多少？
来源:微信公众号CodeL 今天给大家分享的内容基于前几天收到的一条留言信息,留言内容是这样的: 看了这位网友的留言相信有不少刚接触开发的童鞋们也会有同样的困惑,除了用新建类作为桥梁之外还有什么好的办 ...