技术分享:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/angular-filter-learn-1/

以下介绍为自己在使用angular-filter时,简单总结的用法。

开始

1.你可以使用4中不同的方法来安装angular-filter:

  • 克隆或创建这个存储库

  • 通过bower:通过在你的终端执行:$ bower install angular-filter

  • 通过npm:通过在你的终端执行:$ npm install angular-filter

  • 通过cdnjs:http://www.cdnjs.com/libraries/angular-filter

2.在包含或Angular本身外,在引用angular-filter.js(或者angular-filter.min.js)在你的项目index.html中;

3.添加‘angular.filter’依赖项;

当你做完这些,你的文件看起来就类似以下:

<!doctypehtml>
<htmlng-app="myApp">
<head>

</head>
<body>
...<scriptsrc="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>
<scriptsrc="bower_components/angular-filter/dist/angular-filter.min.js"></script>
...<script>varmyApp=angular.module('myApp',['angular.filter']);</script>
...</body>
</html>

filter

从数组中选取一个子集,并将其返回成一个新的数组;

用法:

//html中:{{collection|filter:expression:comparator}}//js中:$filter('filter')(array,expression,comparator)参数:array:想筛选的数组
expression:用于从数组中筛选的条件
comparator:用于确定预期值(从筛选器表达式)和实际值(从数组中的对象)中使用的比较器,应视为匹配。

$scope.friends=[
{name:'John',phone:'555-1276'},{name:'Mary',phone:'800-BIG-MARY'},{name:'Mike',phone:'555-4321'}
]<trng-repeat="friendobjinfriends|filter:{name:'John'}">
<td>{{friendobj.name}}</td>
<td>{{friendobj.phone}}</td>
</tr>

<--result
John555-1276-->

Date

https://docs.angularjs.org/api/ng/filter/date

将日期筛选为想要的日期格式;

用法:

//html中:{{collection|date:format:timezone}}//js中:$filter('date')(date,format,timezone)参数:format为设置的日期格式,例如:'yyyy-MM-dd'
timezone被用于格式化时区。
<span>{{1288323623006|date:'yyyy-MM-ddHH:mm:ssZ'}}</span>
<--result:2010-10-2911:40:23+0800-->

Collection

concat

将另外一个对象或者数组拼接到已有的对象或者数组之后;

functionMainController($scope){
$scope.array=[{a:1},{a:2}];
$scope.object={0:{a:3},1:{a:4}
};
}<ling-repeat="elminarray|concat:object">
{{elm.a}}</li>

<!--result:1234-->

unique

从数组或者对象中移除重复项;

如果提供的是一个字符串,它将用提供的表达式来过滤掉重复使用的。

用法:

//html中:{{collection|unique:'property'}};//js中:$filter('unique')(collection,'property');参数:collection被筛选的数组或者对象
property去掉这个属性中的重复值
functionMainController($scope){
$scope.orders=[
{id:1,customer:{name:'John',id:10}},{id:2,customer:{name:'William',id:20}},{id:3,{id:4,{id:5,customer:{name:'Clive',id:30}}
];
}<trng-repeat="orderinorders|unique:'customer.id'">
<td>{{order.customer.name}},{{order.customer.id}}</td>
</tr>
<!--result:
Allcustomerslist:
John10William20Clive30-->

join

将一个数组转换为一个字符串;

默认情况下,它将加入元素与一个单一的空间,但是你可以提供自己的分隔符。

用法:

//html中:{{collection|join:','}};//js中:collection.join(',');参数:collection需要转换的数组,得到用,连接的字符串

$scope.names=['John','Sebastian','Will','James'];<p>{{names|join:','}}</p>
<!--result:
John,Sebastian,Will,James-->
ps:js中的split()函数可以使用一个字符串中的某一分隔符将其字符串分隔成为数组。

Math

number

用来精确浮点数;

用法:

//html中:{{number_expression|number:fractionSize}}//js中:$filter('number')(number,fractionSize)参数:number为待精确的数字
fractionSize(可选)为小数点后精确位数,默认值是3

functionMainController($scope){
$scope.val=1234.56789;
}<li>{{val|number:2}}</li>
<li>{{val|number}}</li>

<--result:1234.561234.567-->

max/min

用来查找并返回数组中的最大值(最小值);

用法:

html中:{{array|max:optional}}
js中:$filter('max')(array,'optional')
<p>{{[1,2,3,4,7,8,9]|max}}</p>
<--result9-->


sum

计算数组中的值;

用法:

html中:{{array|sum:optional}}
js中:$filter('sum')(array,'optional')

{{[1,3]|sum:10}}<--result16-->

GitHub英文文档:https://github.com/a8m/angular-filter

angularJs中筛选功能-angular.filter-1的更多相关文章

  1. html5使用canvas实现弹幕功能示例

    这篇文章主要介绍了html5使用canvas实现弹幕功能示例的相关资料,需要的朋友可以参考下

  2. 前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)

    这篇文章主要介绍了前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  3. H5 canvas实现贪吃蛇小游戏

    本篇文章主要介绍了H5 canvas实现贪吃蛇小游戏,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  4. ios – parse.com用于键,预期字符串的无效类型,但是得到了数组

    我尝试将我的数据保存到parse.com.我已经预先在parse.com上创建了一个名为’SomeClass’的类.它有一个名为’mySpecialColumn’的列,其数据类型为String.这是我尝试使用以下代码保存数据的代码:如果我运行这个我得到:错误:密钥mySpecialColumn的无效类型,预期字符串,但得到数组这就是我在parse.com上的核心外观:有谁知道我为什么会收到这个错误?

  5. ios – 上下文类型’NSFastEnumeration’不能与数组文字一起使用

    斯威夫特3,你会这样做吗?解决方法正如您所发现的,您不能使用as-casting将数组文字的类型指定为NSFastEnumeration.您需要找到一个符合NSFastEnumeration的正确类,在您的情况下它是NSArray.通常写这样的东西:

  6. ios – 获取资产目录文件夹中所有图像的数组

    在iOS中,是否可以获取资产目录文件夹中的图像数组?我不确定为什么会对此进行投票.我真的不知道从哪里开始.我的另一种方法是创建文件夹中所有文件的plist,但它似乎是多余的.我无法添加任何代码,因为我会添加什么?

  7. ios – 来自调试器的消息:由于内存问题而终止

    我的应用程序使用Geojson文件.我使用MapBoxSDK将MGLpolyline添加到地图中.但问题是我的文件太大,以至于应用程序崩溃并收到错误:来自调试器的消息:由于内存问题而终止.我在第一次循环时面对66234个对象.我试图将数组块化为新数组,但没有成功.请帮我解决问题.这是我在地图上绘制的代码,这里是我的testprojectongithubuseXcode8.1如果有任何不同的第三方可

  8. ios – Swift – 使用字典数组从字典访问数据时出错

    我有一个非常简单的例子,说明我想做什么基本上,我有一个字典,其值包含[String:String]字典数组.我把数据填入其中,但当我去访问数据时,我收到此错误:Cannotsubscriptavalueoftype‘[([String:String])]?’withanindexoftype‘Int’请让我知道我做错了什么.解决方法您的常量数组是可选的.订阅字典总是返回一个可选项.你必须打开它.更

  9. ios – 在Swift中使用“Map”创建两个数组的超集

    假设我有两个数组:我想组合两个数组,以便我得到一个输出我该怎么做呢?

  10. ios – 基于一个对象内的一个值,根据一个值对NSObject数组进行排序

    我创建了一个对象,它看起来像这样然后将其添加到可变数组.稍后,我计算出每个对象到当前gps位置的距离,并将其添加到对象中并将其放回到数组中.我现在需要根据aOffice.distance的值对该数组进行排序,但不知道该怎么做请有人帮帮我谢谢解决方法

随机推荐

  1. Angular2 innerHtml删除样式

    我正在使用innerHtml并在我的cms中设置html,响应似乎没问题,如果我这样打印:{{poi.content}}它给了我正确的内容:``但是当我使用[innerHtml]=“poi.content”时,它会给我这个html:当我使用[innerHtml]时,有谁知道为什么它会剥离我的样式Angular2清理动态添加的HTML,样式,……

  2. 为Angular根组件/模块指定@Input()参数

    我有3个根组件,由根AppModule引导.你如何为其中一个组件指定@input()参数?也不由AppModalComponent获取:它是未定义的.据我所知,你不能将@input()传递给bootstraped组件.但您可以使用其他方法来做到这一点–将值作为属性传递.index.html:app.component.ts:

  3. angular-ui-bootstrap – 如何为angular ui-bootstrap tabs指令指定href参数

    我正在使用角度ui-bootstrap库,但我不知道如何为每个选项卡指定自定义href.在角度ui-bootstrap文档中,指定了一个可选参数select(),但我不知道如何使用它来自定义每个选项卡的链接另一种重新定义问题的方法是如何使用带有角度ui-bootstrap选项卡的路由我希望现在还不算太晚,但我今天遇到了同样的问题.你可以通过以下方式实现:1)在控制器中定义选项卡href:2)声明一个函数来改变控制器中的散列:3)使用以下标记:我不确定这是否是最好的方法,我很乐意听取别人的意见.

  4. 离子框架 – 标签内部的ng-click不起作用

    >为什么标签标签内的按钮不起作用?>但是标签外的按钮(登陆)工作正常,为什么?>请帮我解决这个问题.我需要在点击时做出回复按钮workingdemo解决方案就是不要为物品使用标签.而只是使用divHTML

  5. Angular 2:将值传递给路由数据解析

    我正在尝试编写一个DataResolver服务,允许Angular2路由器在初始化组件之前预加载数据.解析器需要调用不同的API端点来获取适合于正在加载的路由的数据.我正在构建一个通用解析器,而不是为我的许多组件中的每个组件设置一个解析器.因此,我想在路由定义中传递指向正确端点的自定义输入.例如,考虑以下路线:app.routes.ts在第一个实例中,解析器需要调用/path/to/resourc

  6. angularjs – 解释ngModel管道,解析器,格式化程序,viewChangeListeners和$watchers的顺序

    换句话说:如果在模型更新之前触发了“ng-change”,我可以理解,但是我很难理解在更新模型之后以及在完成填充更改之前触发函数绑定属性.如果您读到这里:祝贺并感谢您的耐心等待!

  7. 角度5模板形式检测形式有效性状态的变化

    为了拥有一个可以监听其包含的表单的有效性状态的变化的组件并执行某些组件的方法,是reactiveforms的方法吗?

  8. Angular 2 CSV文件下载

    我在springboot应用程序中有我的后端,从那里我返回一个.csv文件WheniamhittingtheURLinbrowsercsvfileisgettingdownloaded.现在我试图从我的角度2应用程序中点击此URL,代码是这样的:零件:服务:我正在下载文件,但它像ActuallyitshouldbeBook.csv请指导我缺少的东西.有一种解决方法,但您需要创建一个页面上的元

  9. angularjs – Angular UI-Grid:过滤后如何获取总项数

    提前致谢:)你应该避免使用jQuery并与API进行交互.首先需要在网格创建事件中保存对API的引用.您应该已经知道总行数.您可以使用以下命令获取可见/已过滤行数:要么您可以使用以下命令获取所选行的数量:

  10. angularjs – 迁移gulp进程以包含typescript

    或者我应该使用tsc作为我的主要构建工具,让它解决依赖关系,创建映射文件并制作捆绑包?

返回
顶部