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 相关文章推荐
根据邮箱的域名跳转到相应的登录页面的代码
Feb 27 Javascript
jcrop基本参数一览
Jul 16 Javascript
Javascript改变CSS样式(局部和全局)
Dec 18 Javascript
js调试系列 初识控制台
Jun 18 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
Aug 27 Javascript
JavaScript中的getDay()方法使用详解
Jun 09 Javascript
JS中将多个逗号替换为一个逗号的实现代码
Jun 23 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 Javascript
vue 简单自动补全的输入框的示例
Mar 12 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
Mar 17 Javascript
用react-redux实现react组件之间数据共享的方法
Jun 08 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
Sep 03 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可变函数学习小结
2015/11/29 PHP
Zend Framework连接Mysql数据库实例分析
2016/03/19 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
PHP数据对象映射模式实例分析
2019/03/29 PHP
JavaScript 获取用户客户端操作系统版本
2009/08/25 Javascript
IE6下focus与blur错乱的解决方案
2011/07/31 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
2011/11/14 Javascript
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
js写的评论分页(还不错)
2013/12/23 Javascript
js四舍五入数学函数round使用实例
2014/05/09 Javascript
JQuery中$.each 和$(selector).each()的区别详解
2015/03/13 Javascript
JS+CSS相对定位实现的下拉菜单
2015/10/06 Javascript
详解Vue方法与事件
2017/03/09 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
2017/05/27 Javascript
jQuery扇形定时器插件pietimer使用方法详解
2017/07/18 jQuery
React Native之TextInput组件解析示例
2017/08/22 Javascript
利用Node.js检测端口是否被占用的方法
2017/12/07 Javascript
在vue中使用Autoprefixed的方法
2018/07/27 Javascript
通过实例解析vuejs如何实现调试代码
2020/07/16 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
2020/07/22 Javascript
[00:31]DOTA2荣耀之路7:Miracle-空血无敌斩
2018/05/31 DOTA
Python实现基于TCP UDP协议的IPv4 IPv6模式客户端和服务端功能示例
2018/03/22 Python
Python实现的大数据分析操作系统日志功能示例
2019/02/11 Python
python 实现交换两个列表元素的位置示例
2019/06/26 Python
Python如何测试stdout输出
2020/08/10 Python
Pycharm在指定目录下生成文件和删除文件的实现
2020/12/28 Python
python软件测试Jmeter性能测试JDBC Request(结合数据库)的使用详解
2021/01/26 Python
CSS3+JavaScript实现炫酷呼吸效果的示例代码
2020/06/15 HTML / CSS
安全口号大全
2014/06/21 职场文书
经营理念标语
2014/06/21 职场文书
总账会计岗位职责
2015/04/02 职场文书
2015年音乐教学工作总结
2015/07/22 职场文书
导游词之沈阳植物园
2019/11/30 职场文书
vue使用Google Recaptcha验证的实现示例
2021/08/23 Vue.js
关于JavaScript轮播图的实现
2021/11/20 Javascript
Pandas搭配lambda组合使用详解
2022/01/22 Python