AngularJS的Filter的示例详解


Posted in Javascript onMarch 07, 2017

贴上几个有关Filter使用的几个示例。

1. 首先创建一个表格

<body ng-app="app"> 
 <div class="divAll" ng-controller="tableFilter"> 
 <input type="text" placeholder="输入你要搜索的内容" ng-model="key"> 
 <br><br> 
 <table cellspacing="0"> 
 <thead> 
  <tr> 
  <th>名称</th> 
  <th>价格</th> 
  <th>上架时间</th> 
  <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
  <td>{{g.name}}</td> 
  <td>{{g.price}}</td> 
  <td>{{g.inTime}}</td> 
  <td>{{g.desc}}</td> 
  </tr> 
 </tbody> 
 </table> 
</div> 
<script src="js/angular.min.js"></script> 
<script> 
 var app = angular.module('app',[]); 
 app.controller('tableFilter',function($scope){ 
 $scope.goods = [ 
  {name:"HTML5",price:20,inTime:1488785356895,desc:"HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。"}, //时间秒数由 new Date().getTime();获得 
  {name:"JavaScript",price:30,inTime:1488685355895,desc:"JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。"}, 
  {name:"CSS3",price:25,inTime:1468785355895,desc:"CSS即层叠样式表。"}, 
  {name:"AngularJS",price:50,inTime:1482785355895,desc:"AngularJS 是一款优秀的前端JS框架,被用于Google的多款产品当中。。"} 
 ]; 
} 
</script>

加上样式,显示如图

AngularJS的Filter的示例详解

2. 看到价格个时间显示怪怪的,好,修改一下表格。

<td>{{g.name}}</td> 
<td>{{g.price | currency}}</td> <!--currency:货币--> 
<td>{{g.inTime | date:'yyyy-MM-dd'}}</td> <!--将秒数改成日期格式 年-月-日--> 
<td>{{g.desc}}</td>

重新运行

AngularJS的Filter的示例详解

3. 这样一下,确实不碍眼了。但是描述太长了吧,能不能超过一定字数,就不显示了,以...结尾?

好,在表格里加上过滤器,就叫descFilter。字数显示。注意别忘了 ' | ' 过滤器符号。

<td>{{g.desc | descFilter : 10}}</td>

然后在js中为descFilter写上方法

//定义一个过滤器,过滤desc里面的字数,多余十个字的部分省略显示 
app.filter('descFilter',function(){ 
 return function(content,num){ //传两个参数,一个对应内容,一个对应长度 
 if(content.length > num){ 
  content = content.substring(0,num) + "..."; 
 } 
 return content; 
 } 
});

运行看看

AngularJS的Filter的示例详解

可以了。厉害。

4. 搜索框没用吗。别忘了,我们给它附上了ng-model="key",

好,修改一下tr。加上filter条件

<tr ng-repeat="g in goods | filter : key">

.保存运行,在里面搜索内容试试呢

AngularJS的Filter的示例详解

。好神奇,好厉害的Filter.

5.不能按价格排序吗?当然可以。而且不仅升序还能降序。

给价格那个标题加上升降按钮

<th>价格 <input type="button" ng-show="isAsc" value="?" ng-click="sort()"> <input type="button" ng-show="!isAsc" value="▲" ng-click="sort()"></th>

。修改一下js 

<pre name="code" class="javascript"> $scope.isAsc = false; //定义isAsc变量为false,默认升序; 
 $scope.sort = function(){ 
  $scope.isAsc = !$scope.isAsc; //升降切换 
 }</pre><br> 
<p></p> 
<pre></pre>

4 。更新一下过滤排序条件<br> 

<pre name="code" class="html"><tr ng-repeat="g in goods | filter : key | orderBy : 'price' : isAsc"></pre><br> 
<p></p> 
<p>再次运行。升序降序都可以。大功告成!</p> 
<p><img src="http://img.blog.csdn.net/20170306190351615" alt=""><br> 
</p> 
<p><img src="http://img.blog.csdn.net/20170306190425762" alt=""><br> 
</p>

AngularJS的Filter的示例详解

AngularJS的Filter的示例详解

以上所述是小编给大家介绍的AngularJS的Filter的示例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 动态数据下的锚点错位问题解决方法
Dec 24 Javascript
JS定时关闭窗口的实例
May 22 Javascript
浅析jQuery1.8的几个小变化
Dec 10 Javascript
js实现在网页上简单显示时间的方法
Mar 02 Javascript
简介AngularJS的HTML DOM支持情况
Jun 17 Javascript
JS防止网页被嵌入iframe框架的方法分析
Sep 13 Javascript
JS常见算法详解
Feb 28 Javascript
vue2.0实战之基础入门(1)
Mar 27 Javascript
Node.js 中使用 async 函数的方法
Nov 20 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 Javascript
解决layer.msg 不居中 ifram中的问题
Sep 05 Javascript
原生js实现随机点名
Jul 05 Javascript
js上下视差滚动简单实现代码
Mar 07 #Javascript
js实现下一页页码效果
Mar 07 #Javascript
原生JS中slice()方法和splice()区别
Mar 06 #Javascript
浅析vue component 组件使用
Mar 06 #Javascript
js常用的继承--组合式继承
Mar 06 #Javascript
VUE开发一个图片轮播的组件示例代码
Mar 06 #Javascript
canvas仿iwatch时钟效果
Mar 06 #Javascript
You might like
修改Zend引擎实现PHP源码加密的原理及实践
2008/04/14 PHP
PHP 采集程序 常用函数
2008/12/18 PHP
用PHP读取flv文件的播放时间长度
2009/09/03 PHP
PHP正确配置mysql(apache环境)
2011/08/28 PHP
php利用递归实现删除文件目录的方法
2016/09/23 PHP
使用php完成常见的文件上传功能(推荐)
2017/01/13 PHP
Javascript 刷新全集常用代码
2009/11/22 Javascript
利用Jquery实现可多选的下拉框
2014/02/21 Javascript
jquery 使用简明教程
2014/03/05 Javascript
兼容主流浏览器的JS复制内容到剪贴板
2014/12/12 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
2017/02/10 Javascript
vue页面离开后执行函数的实例
2018/03/13 Javascript
微信小程序仿美团城市选择
2018/06/06 Javascript
微信小程序如何调用json数据接口并解析
2019/06/29 Javascript
谈谈IntersectionObserver懒加载的具体使用
2019/10/15 Javascript
[01:04:01]2014 DOTA2华西杯精英邀请赛5 24 DK VS VG
2014/05/25 DOTA
[03:36]DOTA2完美大师赛coL战队趣味视频——我演你猜
2017/11/23 DOTA
[58:15]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 NB vs Liquid
2018/04/02 DOTA
Python实现高斯函数的三维显示方法
2018/12/29 Python
python PrettyTable模块的安装与简单应用
2019/01/11 Python
Python爬虫beautifulsoup4常用的解析方法总结
2019/02/25 Python
详解Python匿名函数(lambda函数)
2019/04/19 Python
python elasticsearch环境搭建详解
2019/09/02 Python
使用 PyTorch 实现 MLP 并在 MNIST 数据集上验证方式
2020/01/08 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
用python写PDF转换器的实现
2020/10/29 Python
微软日本官方网站:Microsoft日本
2017/11/26 全球购物
聪明的粉丝购买门票的地方:TickPick
2018/03/09 全球购物
客服工作职责
2013/12/11 职场文书
打架检讨书500字
2014/01/29 职场文书
电力公司个人求职信范文
2014/02/04 职场文书
生物科学专业毕业生求职信
2014/06/02 职场文书
爱心捐款活动总结
2015/05/09 职场文书
《穷人》教学反思
2016/02/19 职场文书
一文帮你理解PReact10.5.13源码
2021/04/03 Javascript
疑《守望先锋2》A测截图泄露 或将推出新模式、新界面
2022/04/03 其他游戏