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表单通过正则表达式验证电话号码
Mar 14 Javascript
防止登录页面出现在frame中js代码
Jul 22 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
Nov 28 Javascript
JavaScript通过join函数连接数组里所有元素的方法
Mar 20 Javascript
js获取鼠标位置实例详解
Dec 09 Javascript
js 声明数组和向数组中添加对象变量的简单实例
Jul 28 Javascript
微信小程序 MINA文件结构
Oct 17 Javascript
微信小程序实现授权登录
May 15 Javascript
Cordova(ionic)项目实现双击返回键退出应用
Sep 17 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
Sep 24 Javascript
vue父子组件的通信方法(实例详解)
Nov 10 Javascript
JavaScript实现网页tab栏效果制作
Nov 20 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
PHP 将图片按创建时间进行分类存储的实现代码
2010/01/05 PHP
解决CodeIgniter伪静态失效
2014/06/09 PHP
对laravel in 查询的使用方法详解
2019/10/09 PHP
js变量作用域及可访问性的探讨
2006/11/23 Javascript
IE不出现Flash激活框的小发现的js实现方法
2007/09/07 Javascript
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
2009/08/28 Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
2010/05/15 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
2010/06/11 Javascript
javascript操作表格排序实例分析
2015/05/06 Javascript
javascript判断并获取注册表中可信任站点的方法
2015/06/01 Javascript
js实现超酷的照片墙展示效果图附源码下载
2015/10/08 Javascript
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
解决jQuery使用JSONP时产生的错误
2015/12/02 Javascript
jQuery解决$符号命名冲突
2016/06/18 Javascript
jQuery动态创建元素以及追加节点的实现方法
2016/10/20 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
2020/06/29 Javascript
vue.js中Vue-router 2.0基础实践教程
2017/05/08 Javascript
jquery单击文字或图片内容放大并居中显示
2017/06/23 jQuery
bootstrap实现二级下拉菜单效果
2017/11/23 Javascript
python中stdout输出不缓存的设置方法
2014/05/29 Python
Python单例模式实例分析
2015/01/14 Python
如何导出python安装的所有模块名称和版本号到文件中
2020/06/05 Python
通过实例解析Python RPC实现原理及方法
2020/07/07 Python
python 将html转换为pdf的几种方法
2020/12/29 Python
美国婴儿用品店:Babies”R”Us
2017/10/12 全球购物
AJAX检测用户名是否存在的方法
2021/03/24 Javascript
物流管理专业应届生求职信
2013/11/21 职场文书
体育教师自荐信范文
2013/12/16 职场文书
竟聘演讲稿范文
2013/12/31 职场文书
十八大感想感言
2014/02/10 职场文书
后勤主管岗位职责
2014/03/01 职场文书
网络优化专员求职信
2014/05/04 职场文书
心理健康教育主题班会
2015/08/13 职场文书
聘任协议书(挂靠)
2015/09/21 职场文书
2016年优秀教师先进事迹材料
2016/02/26 职场文书
mysql使用instr达到in(字符串)的效果
2022/04/03 MySQL