AngularJS filter

<!DOCTYPE html>

<html ng-app="shoppingModule">
<head>
    <title></title>
    <script src="angular.min.js" type="text/javascript"></script>
    <script>
        var shoppingModule = angular.module("shoppingModule", []);
        shoppingModule.factory("Items", function () {
            var items = {};
            items.query = function () {
                return [
                    { name: 'Jackey', age: 25 },
                    { name: 'Cassi', age: 20 },
                    { name: 'uuuuujC', age: 1.2 }
                ];
            };
            return items;
        });
        //过滤器
        shoppingModule.filter("titleCase", function () {
            var titleCase = function (input) {
                return input.charAt(0).toUpperCase() + input.slice(1);
            };
            return titleCase;
        });
        shoppingModule.controller("shoppingController", function ($scope, Items) {
            $scope.Items = Items.query();
        });
    </script>
</head>
<body>
    <div ng-controller="shoppingController">
        search:<input ng-model="query" />
        <ul>
            <li ng-repeat="item in Items|filter:query">
                {{item.name | titleCase}}
            </li>
        </ul>
    </div>
</body>
</html>

加多一个排序

<!DOCTYPE html>

<html ng-app="shoppingModule">
<head>
    <title></title>
    <script src="angular.min.js" type="text/javascript"></script>
    <script>
        var shoppingModule = angular.module("shoppingModule", []);
        shoppingModule.factory("Items", function () {
            var items = {};
            items.query = function () {
                return [
                    { name: 'Jackey', age: 25 },
                    { name: 'Cassi', age: 34 },
                    { name: 'uuuuujC', age: 12 }
                ];
            };
            return items;
        });
        //过滤器
        shoppingModule.filter("titleCase", function () {
            var titleCase = function (input) {
                return input.charAt(0).toUpperCase() + input.slice(1);
            };
            return titleCase;
        });
        shoppingModule.controller("shoppingController", function ($scope, Items) {
            $scope.Items = Items.query();
        });
    </script>
</head>
<body>
    <div ng-controller="shoppingController">
        search:<input ng-model="query" />
        <select ng-model="orderByy">
            <option value="name">name</option>
            <option value="age">age</option>
        </select>
        <ul>
            <li ng-repeat="item in Items|filter:query | orderBy:orderByy">
                {{item.name | titleCase}}  {{item.age}}
            </li>
        </ul>
    </div>
</body>
</html>

模块注入式：

<!DOCTYPE html >

<html>
<head>
    <title></title>
    <script src="angular.min.js" type="text/javascript"></script>
</head>
<body>
<div ng-app="filte" ng-controller="filterController">
    {{name | titleCase}}
</div>
<script>

    var filterService = angular.module("filterService", []);
    filterService.filter("titleCase", function () {
        var titleCase = function (input) {
            return input.toUpperCase();
        };
        return titleCase;
    });

    var filte = angular.module("filte", ["filterService"]);
    filte.controller("filterController", function ($scope) {
        $scope.name = "jackey";
    });
</script>
</body>
</html>

//1 currency（货币处理）
    // 默认为美元符号 可修改为  {{2345 | currency:"RMB"}}

    //2 date (日期格式化)
    //原生的js对日期的格式化能力有限，ng提供的date过滤器基本可以满足一般的格式化要求。用法如下：
    //{{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}

    //3 filter （匹配） {{childrenArray | filter:"a"}}

    //4 json格式化 {{jsonTest|json}}

    //5 limitTo 限制长度 {{ddd|2}}

    //6 lowercase(小写)

    //7 uppecase(大写)

    //8 number(格式化数字) {{3333333|number:2}} 实现千位分割 ，保留小数点后2位

    //9 orderBy 排序 {{ childrenArray | orderBy : 'age' }}

filter的格式一般都为

myApp.filter("filterName",function(){

　　return function(text){

　　　　return text;

　　};

});

factory inject data into filter

<!DOCTYPE html >

<html xmlns="http://www.w3.org/1999/xhtml" ng-app="demo">
<head>
    <title></title>
    <script src="angular.min.js" type="text/javascript"></script>
</head>
<body ng-controller="demoController">
    <input type="text" ng-model="data.message" />
    <pre>{{data.message}}</pre>

    <input type="text" ng-model="data.message" />
    <pre>{{data.message | reversee}}</pre>
</body>
<script>
    var demo = angular.module("demo", []);
    demo.controller("demoController", function ($scope, Data) {
        $scope.data = Data;
    });
    demo.factory("Data", function () {
        return {message:"Jackey"};
    });
    demo.filter("reversee", function (Data) {
        return function (test) {
            return test.split("").reverse().join("") + " Inject Data " + Data.message;
        };
    });
</script>
</html>