angular.js提供了丰富的内置筛选器：
1.currency[:symbol],依据指定的symbol将数值格式化为货币。
2.filter:exp:compare,使用exp参数值对表达式进行宽松或严格筛选比较。compare通常为布尔值或返回布尔值的表达式，为true时将进行严格比较（===），为false时只检查期望值是否为真实值的子集（通常用作页面值搜索）
3.json,将js对象格式化为JSON字符串，不支持的属性将被忽略。
4.limitTo:limit,限制个数。
5.lowercase/uppercase,大小写转换。
6.number[:faction],将数字格式化为文本，指定faction参数时小数部分的位数将被限制。
7.orderBy:exp:reverse,根据exp参数进行排序，reverse为true时降序，false（默认）时升序。
8.date[:format],将js的日期对象进行格式化输出字符串。
以下示例展示了filter和orderBy筛选器的基本用法：
<!DOCTYPE HTML>
<html ng-app='myApp'>
<head>
<meta charset='utf-8'>
<title>7</title>
<style type="text/css">
table{
text-align: right;
}
td,th{
padding: 3px;
}
th{
cursor: pointer;
}
</style>
</head>
<body>
<div ng-controller='controllerA'>
<h2>Sorting and ordering</h2>
<input type='text' ng-model='filterString'>
<table>
<tr>
<th>Title</th>
<th>Url</th>
<th>Stars</th>
</tr>
<tr ng-repeat="x in resources | filter:filterString | orderBy:'stars':true">
<td>{{x.title}}</td>
<td>{{x.url}}</td>
<td>{{x.stars}}</td>
</tr>
</table>
</div>
<script src='http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js'></script>
<script>
var app = angular.module('myApp',[]);
app.controller('controllerA',function($scope){
$scope.resources = [
{title:'JQuery',stars:200,url:'http://jquery.com'},
{title:'Bootstrap',stars:300,url:'http://bootstrap.com'},
{title:'Dojo',stars:90,url:'http://dojo.com'},
{title:'Angular.js',stars:260,url:'http://angular.js.com'}
]
})
</script>
</body>
</html>
相关推荐
本示例中，"Jquery结合angular.js与bootstrap.js实现的无刷新翻页+查找特效源码"是将这三个强大的JavaScript库融合在一起，以创建高效、流畅的前端应用。让我们详细探讨这三个库各自的功能以及它们如何协同工作来...
Angular.JS 是一个由 Google 维护的开源 JavaScript 框架，主要用于构建单页应用（Single-Page Applications, SPA）。它提供了一种声明式的方式来构建用户界面，使得前端开发更加高效，且易于维护。在"书猴"这个示例...
在Angular.JS中实现无限级联动菜单是一种常见的需求，特别是在构建复杂的Web应用时，这种功能可以用于导航或筛选。本文将介绍如何通过Angular.JS创建这样的菜单系统，并提供几个具体的示例。 首先，无限级联动菜单...
pagarme-angular-style...筛选器 执照 单一责任 1法则 [ Y001型] 每个文件定义1个组件。 以下示例在同一个文件中定义了app模块及其依赖项，定义了控制器并定义了工厂。 /* avoid */ angular . module ( 'app'
不过，从AngularJS的角度来看，通常会有以下文件结构：`index.html`作为入口文件，`app.js`或`main.js`作为应用主文件，`controllers.js`存放控制器，`services.js`存放服务，`directives.js`存放指令，以及可能的`...
`find()` 方法用于查找元素的后代，可以使用CSS选择器进行筛选，如：`angular.element(element).find('.descendant')`。 9. **检查类**： `hasClass()` 方法检查元素是否包含特定的样式类，如：`angular.element...
【标题】"TweetSearch-with-Angular.js" 是一个基于Angular.js框架的项目，它旨在展示如何使用AngularJS来实现Twitter搜索功能。AngularJS是由Google维护的一个强大的前端开发框架，它允许开发者用HTML作为模板语言...
5. **过滤器**：允许从数据集中筛选出子集，创建新数组。 6. **指令**：扩展了HTML的功能，允许创建自定义标签和属性，实现DOM操作。 7. **模板**：结合控制器和模型信息动态渲染视图，可以是单独的HTML文件或嵌入到...
角度一步一步一步一步学习AngularJS第 1 章基本 AngularJS 包括： 控制器核心 API angularJS 模块DI第2章指示$http 承诺筛选证实第3章使用 RESTful API 使用 grunt、bower 构建网站====================== 安装凉亭...
**List.js筛选器插件详解** List.js是一个强大的JavaScript库，专为改善和增强HTML列表元素的功能而设计。它不依赖任何特定的前端框架，如jQuery，因此可以在各种项目中灵活使用，无论你是使用React、Vue还是...
angular-eha.capitalize 用法 筛选 过滤器支持两种模式； 'first'（默认）和 'words' 可以像这样传递给过滤器： 默认 {{ 'i am a string' | capitalize }} <!-- I am a string --> $filter ( 'capitalize' )...
3. **依赖注入**：Angular1.x的DI系统允许开发者轻松获取和管理应用程序中的服务，如$http服务用于处理HTTP请求，$scope服务作为控制器和视图之间的通信桥梁。 4. **模块化**：Angular1.x支持模块化组织代码，便于...
**AngularJS-AddressBook: 一个使用Angular.js构建的通讯录应用** AngularJS是一个由Google维护的开源JavaScript框架，主要用于构建动态web应用。它通过提供数据绑定和依赖注入等特性，简化了前端开发流程，使得...
Angular JS是Google维护的一个开源项目，它基于JavaScript，同时也充分利用了ECMAScript的特性，为开发者提供了丰富的功能和便利。 1. **双向数据绑定**：Angular JS的核心特性之一就是双向数据绑定，它将视图与...
在这个场景中，我们需要创建一个允许用户选择多个标签的功能，类似于在电商网站上过滤商品的筛选标签。 首先，我们需要了解HTML部分的代码结构。在HTML中，`<input type="checkbox">`元素用于创建复选框，`ng-...
7. **过滤器**：过滤器用于格式化或转换数据，如`currency`用于货币格式化，`date`用于日期格式化，`filter`用于数据筛选。 8. **路由**：AngularJS的`ngRoute`模块提供了URL路由功能，可以实现页面间的导航和状态...
AngularJS，通常简称为Angular，是由Google维护的一个开源JavaScript框架，用于构建单页应用程序（SPA）。这个"angular文件包"包含的是AngularJS的1.4.3版本，这是一个非常稳定且广泛使用的版本，发布于2015年，当时...
总结，"querybuilder_sample"项目是一个基于Angular.js的动态查询构建器，展示了如何利用JavaScript框架实现用户友好的查询界面。通过学习这个示例，开发者可以了解到如何在Web应用中创建灵活的查询工具，并掌握...
在Angular中实现商品筛选功能，主要涉及数据的定义、视图的渲染、事件处理以及过滤器的使用。通过服务来管理数据，控制器来协调业务逻辑，视图则负责展示数据和响应用户交互。这种分离的架构使得代码更易维护，也...