贴上几个有关过滤器使用的几个示例。
<强> 1。首先创建一个表格
& lt;身体ng-app=在“应用程序”;
& lt; div类=" divAll " ng-controller=皌ableFilter”比;
& lt;输入类型=拔谋尽闭嘉环?笆淙肽阋阉鞯哪谌荨眓g-model=肮丶北?
& lt; br> & lt; br>
& lt;表格单元格间距=" 0 "比;
& lt; thead>
& lt; tr>
& lt; th>名称& lt;/th>
& lt; th>价格& lt;/th>
& lt; th>上架时间& lt;/th>
& lt; th>描述& lt;/th>
& lt;/tr>
& lt;/thead>
& lt; tbody>
& lt; tr>
& lt; td> {{g.name}} & lt;/td>
& lt; td> {{g.price}} & lt;/td>
& lt; td> {{g.inTime}} & lt;/td>
& lt; td> {{g.desc}} & lt;/td>
& lt;/tr>
& lt;/tbody>
& lt;/table>
& lt;/div>
& lt;脚本src=" https://www.yisu.com/zixun/js/angular.min.js "祝辞& lt;/script>
& lt; script>
应用var=angular.module(“应用程序”,[]);
app.controller (tableFilter,函数(范围){
美元的范围。商品=[
{名称:“HTML5”,价格:20,亲密的:1488785356895,desc:“HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。”},//时间秒数由新的日期().getTime();获得
{名称:“JavaScript”,价格:30日时间:1488685355895,desc:“JavaScript一种直译式脚本语言,是一种动态类型,弱类型,基于原型的语言,内置支持类型。"},
{名称:“CSS3”,价格:25日,时间:1468785355895,desc:“CSS即层叠样式表。"},
{名称:“AngularJS”,价格:50,亲密的:1482785355895,desc:“AngularJS是一款优秀的前端JS框架,被用于谷歌的多款产品当中. . "}
];
}
& lt;/script>之前
加上样式,显示如图
<强> 2。看到价格个时间显示怪怪的,好,修改一下表格。
& lt; td> {{g.name}} & lt;/td>
& lt; td> {{g。货币价格|}}& lt;/td>& lt; !——货币:货币——比;
& lt; td> {{g。亲密的|时间:' yyyy-MM-dd '}} & lt;/td>& lt; !——将秒数改成日期格式年——月——日——比;
& lt; td> {{g.desc}} & lt;/td>之前
重新运行
<强> 3。这样一下,确实不碍眼了。但是描述太长了吧,能不能超过一定字数,就不显示了,以……结尾?
好,在表格里加上过滤器,就叫descFilter。字数显示。注意别忘了‘|’过滤器符号。
& lt; td> {{g.desc | descFilter: 10}} & lt;/td>之前
然后在js中为descFilter写上方法
//定义一个过滤器,过滤desc里面的字数,多余十个字的部分省略显示
app.filter (descFilter,函数(){
返回函数(内容,num){//传两个参数,一个对应内容,一个对应长度
如果内容。长度比;num) {
内容=content.substring (0, num) +“…”;
}
返回内容;
}
});之前
运行看看
可以了。厉害。
<强> 4。搜索框没用吗。别忘了,我们给它附上了ng-model=肮丶?
好,修改一下tr。加上过滤条件
商品| & lt; tr ng-repeat=" g过滤器:键”在
。保存运行,在里面搜索内容试试呢
。好神奇,好厉害的过滤器。
<强> 5。不能按价格排序吗?当然可以。而且不仅升序还能降序。
给价格那个标题加上升降按钮
& lt; th>价格& lt;输入类型=鞍磁ァ眓g-show=癷sAsc”价值=" https://www.yisu.com/zixun/▼”ng-click=?)”比;& lt;输入类型=鞍磁ァ眓g-show=" !isAsc " value=" https://www.yisu.com/zixun/皀g-click="() "祝辞& lt;/th>之前
。修改一下js
& lt;以前的名字=按搿眂lass=癹avascript”比;美元的范围。isAsc=false;//定义isAsc变量为false,默认升序;
美元的范围。类型=function () {
美元的范围。isAsc=! scope.isAsc美元;//升降切换
}& lt;/pre> & lt; br>
& lt; p> & lt;/p>
& lt; pre> & lt;/pre>
