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 性能分析案例
本章以实际案例分析在android开发中,性能方面的优化和处理.设计到知识点有弱引用,memory monitor,Allocation Tracker和leakcanary插件. 1.测试demo ...
- 原生JS 表单提交验证器
转载:http://www.cnblogs.com/sicd/p/4613628.html 一.前言 最近在开发一个新项目,需要做登陆等一系列的表单提交页面.在经过“缜密”的讨论后,我们决定 不用外部 ...
- PHP无限级分类的实现（不使用递归）
无限级分类在开发中经常使用,例如:部门结构.文章分类.无限级分类的难点在于“输出”和“查询”,例如 将文章分类输出为<ul>列表形式: 查找分类A下面所有分类包含的文章. 1.实现原理 在 ...
- Windows系统下Oracle每天自动备份
linux和unix下面使用shell可以很方便实现,如果windows环境下可以结合计划任务实现 创建备份目录d:\backup, 创建批处理命令Bak.bat,编写备份脚本 exp user/pa ...
- 问题解决——MFC error RC2170: bitmap file res\XXXXXXX.png is not in 3.00 format
=================================版权声明================================= 版权声明:原创文章 谢绝转载 请通过右侧公告中的“联系邮 ...
- 关于IPB帧与恒定比特率、动态比特率的详解
之所以写这篇文章是因为有朋友对IPB帧的设置比较感兴趣,回复中说得比较简单,因此在这里详细的写一下,虽然说一般情况下我们很少去设置这个IPB帧,不过,如果真的学好了,并且清楚的了解了这个IPB帧的概念 ...
- ARM汇编与C混合编程
GNU内联汇编 内联汇编即在C中直接使用汇编语句进行编程,使程序可以在C程序中实现C语言不能完成的一些工作,例如,在下面几种情况中必须使用内联汇编或嵌入型汇编 程序中使用饱和算术运算(Saturati ...
- Log4J基础详解及示例大全
去年这个时候,为做软件工程的大作业就详细学过Log4J的用法了,时隔一年想要在新的项目中好好使用一下的时候,发现几乎全忘了,悲催啊-- 再上网查资料,总是不能找到一篇符合我的口味,拿来就能轻松上手,方 ...
- 设置DIV可编辑
<div id="move" contentEditable="true">可编辑</div> 设置contentEditable属性可 ...
- maven私服搭建
一.软件安装 地址:http://www.sonatype.org/nexus/thank-you-for-downloading/?dl=tgz 解压: 启动: >> nexus sta ...