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. PYTHON线程知识再研习C---线程互斥锁

    结合例子,就很好理解了. 就是不要让共享变量被各个线程无序执行,导致结果不可预期 threading模块中定义了Lock类,可以方便的处理锁定: #创建锁mutex = threading.Lock( ...

  2. 学EE做硬件找工作不如学CS做软件，为什么会这样？

    学EE做硬件找工作不如学CS做软件,为什么会这样? 电子工程(EE)就业最好的方向居然是转计算机,也许让有的人觉得很不公平,EE也是很重要的学科,我们学习也很努力,为什么就业会不如CS?也有的人好奇, ...

  3. 安卓，通过本地应用分享到微信、facebook等

    别的不说了,直接上代码. 支持分享到微信.微博.facebook.twitter package com.example.shareSample; import java.util.List; imp ...

  4. Paint House II 解答

    Question There are a row of n houses, each house can be painted with one of the k colors. The cost o ...

  5. WustOJ 1575 Gingers and Mints(快速幂 + dfs )

    1575: Gingers and Mints Time Limit: 1 Sec  Memory Limit: 128 MB   64bit IO Format: %lldSubmitted: 24 ...

  6. Windows系统基本概念

    windows API:被文档化的可以调用的子例程,如CreateProcess 原生的系统服务(执行体系统服务):未被文档化的.可以再用户模式下调用的底层服务,如NtCreateProcess 内核 ...

  7. spring简单入门示例

    1 控制反转IOC\依赖注入DI,因为翻译的不同,因此有两个名字.       控制反转意思就是说,当我们调用一个方法或者类时,不再有我们主动去创建这个类的对象,控制权交给别人(spring). 依赖 ...

  8. Chrome浏览器查看cookie

    原文:http://jingyan.baidu.com/article/6b18230954dbc0ba59e15960.html 1. 查看页面的cookie 方法: a). 点击地址栏前面的文档薄 ...

  9. uva 11081 - Strings(LCS)

    题目链接:11081 - Strings 题目大意:给出三个字符串,从分别从第一个字符串和第二个字符串中挑选子串a,b,用a和b组成第三个字符串,问可组成的子串有多少种. 解题思路:说起来惭愧啊,题目 ...

  10. Qt5官方demo解析集21——Extending QML - Adding Types Example

    本系列全部文章能够在这里查看http://blog.csdn.net/cloud_castle/article/category/2123873 又是一个新的系列了,只是这个系列和我们之前的Chapt ...