filter用于关键字过滤操作,orderBy用于排序操作,运行界面如下:

点击标题Name与Email实现排序功能,输入框中输入关键字进行过滤,同时实现根据关键字进行过滤后进行排序操作:

ng-repeat="user in users | filter:keyword | orderBy:sortField:reverse"

index.html

<!DOCTYPE html>

<html ng-app="myApp">
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/uikit.css"/>
<link rel="stylesheet" href="../css/my-uikit.css"/>
</head>
<body> <div class="uk-panel" ng-controller="UserCtrl"> <table class="uk-table uk-table-hover uk-table-striped">
<thead>
<tr>
<th colspan="2">
<form class="uk-form">
<input type="text" ng-model="keyword" placeholder="Input keword..."/>
</form>
</th>
</tr>
<tr class="uk-bg-primary">
<th ng-click="sort('name')">Name</th>
<th ng-click="sort('email')">Email</th>
</tr>
</thead>
<tbody ng-repeat="user in users | filter:keyword | orderBy:sortField:reverse" ng-click="selectUser(user)"
ng-switch on="isSelected(user)"
class="uk-text-success">
<tr>
<td>{{user.name}}</td>
<td>{{user.email}}</td>
</tr>
<tr ng-switch-when="true">
<td colspan="2" class="uk-bg-success">{{user.desc}}</td>
</tr>
</tbody>
</table>
</div> </body> <script src="../js/angular.js"></script>
<script src="index.js"></script>
</html>

index.js

var myApp = angular.module('myApp', []);

myApp.controller('UserCtrl', ['$scope', function($scope){
$scope.users = [
{
name:'张三',
email:'zhangsan@gmail.com',
desc: '张三的详细信息...'
},
{
name:'李四',
email:'lisi@123.com',
desc: '李四的详细信息...'
},
{
name:'王五',
email:'wangwu@qq.com',
desc: '王五的详细信息...'
}
]; $scope.selectUser = function(user){
$scope.selectedUser = user;
}; $scope.isSelected = function(user){
return $scope.selectedUser === user;
}; $scope.sortField = undefined;
$scope.reverse = false; $scope.sort = function(fieldName){
if($scope.sortField===fieldName){
$scope.reverse=!$scope.reverse;
}else{
$scope.sortField = fieldName;
$scope.reverse = false;
}
};
}]);

filter 以及 orderBy的使用的更多相关文章

  1. filter,orderBy等过滤器

    filter用法比较灵活(也增加了较高的复杂度),单独列出. 基本的用法: <input type="text" class="search" ng-mo ...

  2. AngularJS学习--- AngularJS中数据双向绑定(two-way data-binding) orderBy step4

    1.切换工作目录 git checkout step- #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-mo ...

  3. AngularJS(五)——filter(过滤器)

    前言 过滤器可以用一个管道字符(|)添加到表达式和指令中.比如做ITOO的时候或者其他项目的时候,总是想统一货币日期等显示,以前的做法,不断循环该控件或该标签,然后循环转换.如果利用AngularJS ...

  4. filter 过滤器从数组中选择一个子集

    输入过滤器可以通过一个管道字符和一个过滤器添加到指令中,该过滤器后面跟着一个冒号:冒号后面是一个模型名称. <!DOCTYPE html><html><head>& ...

  5. angularjs实现购物车批量删除,filter模糊查询,排序

    数据源 $scope.data=[ {num:1234,name:"ipad",price:3400.00,count:10}, {num:1235,name:"ipho ...

  6. Nodejs之MEAN栈开发(七)---- 用Angular创建单页应用(下)

    上一节我们走通了基本的SPA基础结构,这一节会更彻底的将后端的视图.路由.控制器全部移到前端.篇幅比较长,主要分页面改造.使用AngularUI两大部分以及一些优化路由.使用Angular的其他指令的 ...

  7. AngularJS 过滤器

    过滤器可以使用一个管道字符(|)添加到表达式和指令中 AngularJS 过滤器可用于转换数据: currency 格式化数字为货币格式. filter 从数组项中选择一个子集. lowercase ...

  8. 让OData和NHibernate结合进行动态查询

    OData是一个非常灵活的RESTful API,如果要做出强大的查询API,那么OData就强烈推荐了.http://www.odata.org/ OData的特点就是可以根据传入参数动态生成Ent ...

  9. AngularJS的基础元素应用

    <!doctype html> <!-- 标记ng-app告诉AngularJS处理整个HTML页并引导应用 --> <html ng-app> <head& ...

随机推荐

  1. 用keil直接生成BIN文件

    1.下载hex2bin到keil的任意目录,下载地址:http://www.keil.com/download/docs/7.asp 或者 http://www.hex2bin.com/files/h ...

  2. Linux Shell逻辑运算符和表达式详解

    Shell 逻辑运算符涉及以下几种类型,只要适当选择,可以解决我们很多复杂的判断,达到事半功倍效果. 一.逻辑判断1.关于文件与目录的逻辑判断-f 常用.判断『文件』是否为普通文件,比如: if [ ...

  3. spring framework 4 源码阅读(2)---从ClassPathXmlApplicationContext开始

    Application初始化日志 15:23:12.790 [main] DEBUG o.s.core.env.StandardEnvironment - Adding [systemProperti ...

  4. 解决android4.0系统中菜单(Menu)添加Icon无效问题

    本文转载自: http://blog.csdn.net/stevenhu_223/article/details/9705173 在Android4.0系统中,创建菜单Menu,通过setIcon方法 ...

  5. 2015第24周一Spring事务

    1. Spring事务管理简介 (1)Spring为多种不同类型的事务管理机制提供统一编程模型,这些事务管理模型包括JTA.JDBC.Hibernate.JPA和JDO. (2)Spring支持声明式 ...

  6. 为什么新建的管理员账号权限没有Administrator大?

    Administrator是超级管理员,UAC不用确认,跟关了一样. 新建隶属于administrator组的用户,可以关掉UAC. 控制面板>系统和安全>操作中心>更改用户帐户控制 ...

  7. LNMP、LAMP、LANMP一键安装脚本(定期更新)[转]

    这个脚本是使用shell编写,为了快速在生产环境上部署LNMP/LAMP/LANMP(Linux.Nginx/Tengine.MySQL/MariaDB/Percona.PHP),适用于CentOS/ ...

  8. Android ActionBar详解(三):ActionBar实现切换Tabs标签

    实现切换Tabs标签; Activity代码: public class ActionBarTabs extends Activity { @Override protected void onCre ...

  9. LDAP禁止匿名访问

    LDAP默认是允许用户匿名访问的,如下图:在使用工具连接时,勾选匿名绑定后,不需要输入UserDN和密码就可能连接到LDAP服务器,但是只能进行read及search操作.不能做任何的修改及删除操作. ...

  10. DotNet程序汉化过程--SnippetCompiler准确定位

    开篇前言 上一篇简单介绍了一下怎么汉化.Net程序,但那也仅仅是最基础的工作,要想汉化好一款软件基础我们得做扎实了,但是对于一些需要技巧的也不能不会啊,这一篇就介绍一下怎么准确定位字符串. 主要使用工 ...