您的位置：首页 > Web前端 > AngularJS

AngularJS filter

2014-04-14 19:53 288 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航