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指令深度学习篇的更多相关文章

  1. 深度学习篇——Tensorflow配置（傻瓜安装模式）

    前言 如果你是一个完美主义者,那么请绕过此文,请参考<深度学习篇——Tensorflow配置(完美主义模式)> 安装 pip install tensorflow ok,只要不报错,安装就 ...

  2. 【深度学习篇】---CNN和RNN结合与对比，实例讲解

    一.前述 CNN和RNN几乎占据着深度学习的半壁江山,所以本文将着重讲解CNN+RNN的各种组合方式,以及CNN和RNN的对比. 二.CNN与RNN对比 1.CNN卷积神经网络与RNN递归神经网络直观 ...

  3. 【深度学习篇】--神经网络中的调优一，超参数调优和Early_Stopping

    一.前述 调优对于模型训练速度,准确率方面至关重要,所以本文对神经网络中的调优做一个总结. 二.神经网络超参数调优 1.适当调整隐藏层数对于许多问题,你可以开始只用一个隐藏层,就可以获得不错的结果,比 ...

  4. 深度学习篇——Tensorflow-GPU配置

    tensoflow-gpu安装 对于python 3.5和3.6的童鞋们而言,安装tensorflow其实并不难,因为我们可以通过pip直接安装. 不过,第一要求你安装的python是64位的,如下图 ...

  5. 【深度学习篇】--Windows 64下tensorflow-gpu安装到应用

    一.前述 一直以为自己的笔记本不支持tensflow-gpu的运行,结果每次运行模型都要好久.偶然间一个想法,想试试自己的笔记本,结果竟然神奇的发现能用GPU.于是分享一下安装步骤. 二.具体 因为版 ...

  6. 【深度学习篇】--神经网络中的池化层和CNN架构模型

    一.前述 本文讲述池化层和经典神经网络中的架构模型. 二.池化Pooling 1.目标 降采样subsample,shrink(浓缩),减少计算负荷,减少内存使用,参数数量减少(也可防止过拟合)减少输 ...

  7. Nginx详解二十三：Nginx深度学习篇之Nginx+Lua开发环境搭建

    Nginx+Lua开发环境 1.下载LuaJIT解释器wget http://luajit.org/download/LuaJIT-2.0.2.tar.gztar -zxvf LuaJIT-2.0.2 ...

  8. 【深度学习篇】--Seq2Seq模型从初识到应用

    一.前述 架构: 问题: 1.压缩会损失信息 2.长度会影响准确率 解决办法: Attention机制:聚焦模式 “高分辨率”聚焦在图片的某个特定区域并以“低分辨率”,感知图像的周边区域的模式.通过大 ...

  9. Nginx详解二十四：Nginx深度学习篇之灰度发布

    实战场景 - 灰度发布 灰度发布的作用:按照一定的关系区别,分部分的代码进行上线,使代码的发布能平滑过渡上线实现方式: 1.用户的信息cookie等信息区别 2.根据用户的IP地址 安装memcach ...

随机推荐

  1. android 图片性能优化

    本章讲述在android开发中,图片处理方面的优化.包括知识点为大图加载,图片压缩,图片缓存处理及开源图片处理框架Universal-Image-Loader. 1.图片引发的内存不足 当在andro ...

  2. Ruby的模型关系随笔

    1 Class和Module的实例方法也就是所有具体类和具体Module的类方法,因为具体类和具体Module分别是Class和Module的实例.例如Object.new对应着Class#new,K ...

  3. C#和ASP.NET之事件

    事件是一种用于类和类之间传递消息或触发新的行为的编程方式.通过提供事件的句柄,能够把控件和可执行的代码联系在一起, 如用户单击Button控件触发Click事件后就执行相应的事件处理代码. 事件的声明 ...

  4. C# 6.0新特性---语法糖

    转载:http://www.cnblogs.com/TianFang/p/3928172.html 所谓语法糖就是在编译器里写做文章,达到简化代码书写的目的,要慎重使用,省略过多不易理解. NULL检 ...

  5. ORA-02292: integrity constraint (xxxx) violated - child record found

    在更新表的主键字段或DELETE数据时,如果遇到ORA-02292: integrity constraint (xxxx) violated - child record found 这个是因为主外 ...

  6. springMVC基础controller类

    此文章是基于 搭建SpringMVC+Spring+Hibernate平台 功能:设置请求.响应对象:session.cookie操作:ajax访问返回json数据: 创建springMVC基础con ...

  7. jquery mobile开发中footer一直在底部的设置方法

    现给出html中Body节点中的代码如下: 实现代码:data-position=”fixed” <div data-role="page" id="pageone ...

  8. SQL SERVER 2014 各个版本支持的功能

    转自:https://technet.microsoft.com/library/cc645993 转换箱规模限制 功能名称 Enterprise Business Intelligence Stan ...

  9. Windows10 会不会成为微软的新起点？

    Because if you change the way you see the world, you can change the world you see. 如果你改变看世界的方式,你就能改变 ...

  10. import com.sun.image.codec.jpeg.JPEGCodec不通过 找不到包

    import com.sun.image.codec.jpeg.JPEGCodec;   在Eclipse中处理图片,需要引入两个包: import com.sun.image.codec.jpeg. ...