過(guò)濾器(filter)
- 格式化數(shù)據(jù)
- 過(guò)濾數(shù)據(jù)(filter)
<ul>
<!-- 如果指定一個(gè)布爾值第晰，或者字符串就是全文匹配 -->
<!-- 會(huì)到對(duì)應(yīng)的todos中尋找申钩，如果當(dāng)前元素有completed屬性且值 為true就會(huì)被顯示出來(lái)。（只會(huì)到completed屬性中尋找） -->
<li ng-repeat="item in todos | filter : {completed:true} ">
{{item.name}},{{item.completed}}
</li>
</ul>
<h1>currency</h1>
<!-- 在數(shù)據(jù)模型后加上| 再加上過(guò)濾器的名字
也可以在過(guò)濾器名字后指定參數(shù)，參數(shù)是寫(xiě)在冒號(hào)后面的-->
<p>{{money | currency : '￥'}}</p>
<h1>date</h1>
<p>{{myDate | date : 'yyyy年MM月dd日 HH:mm:ss'}}</p>
<h1>limitTo</h1>
<!-- 第一個(gè)參數(shù)盆昙，表明顯示多少個(gè)字，第二個(gè)參數(shù)表示束铭，從第幾個(gè)字開(kāi)始顯示(索引從0開(kāi)始) -->
<p>{{msg | limitTo : 5 : 2}}...</p>
<h1>json</h1>
<!-- 格式化顯示json數(shù)據(jù)炭分，參數(shù)指定縮近的長(zhǎng)度 -->
<pre>{{myJson | json : 8}}</pre>
<h1>orderBy</h1>
<!-- 對(duì)數(shù)據(jù)進(jìn)行排序，參數(shù)亏钩，給+號(hào)就按正序排莲绰，- 就按倒序排 -->
<span ng-repeat="item in arr | orderBy:'-'">{{item }}，</span>
<!-- $filter 需要在控制器的回調(diào)中傳入 -->
// 可以調(diào)用不同的過(guò)濾器得到相應(yīng)的結(jié)果
// 參數(shù)是一個(gè)過(guò)濾器的名字
// 返回值是一個(gè)方法
// : 第一個(gè)參數(shù)是需要處理的數(shù)據(jù)
// : 后面的參數(shù)是當(dāng)前過(guò)濾器本身需要的參數(shù)
$scope.result = $filter('currency')($scope.money,'￥')
過(guò)濾器使用代碼
1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>過(guò)濾器</title>
</head>
<body ng-app="testFilter" ng-controller="filterController">
<h1>在js中使用過(guò)濾器</h1>
{{result}}
<h1>json</h1>
<!-- 格式化顯示json數(shù)據(jù)姑丑，參數(shù)指定縮近的長(zhǎng)度 -->
<pre>{{myJson | json : 8}}</pre>
<h1>orderBy</h1>
<!-- 對(duì)數(shù)據(jù)進(jìn)行排序蛤签，參數(shù)，給+號(hào)就按正序排栅哀，- 就按倒序排 -->
<span ng-repeat="item in arr | orderBy:'-'">{{item }}顷啼，</span>
<h1>limitTo</h1>
<!-- 第一個(gè)參數(shù)，表明顯示多少個(gè)字昌屉，第二個(gè)參數(shù)表示钙蒙，從第幾個(gè)字開(kāi)始顯示(索引從0開(kāi)始) -->
<p>{{msg | limitTo : 5 : 2}}...</p>
<h1>currency</h1>
<!-- 在數(shù)據(jù)模型后加上| 再加上過(guò)濾器的名字 -->
<p>{{money | currency : '￥'}}</p>
<h1>date</h1>
<p>{{myDate | date : 'yyyy年MM月dd日 HH:mm:ss'}}</p>
<script src="libs/angular.js"></script>
<script>
// 1.創(chuàng)建模塊
var app = angular.module('testFilter', [])
// 2.創(chuàng)建控制器
app.controller('filterController', ['$scope','$filter',function($scope,$filter){
// 財(cái)富
$scope.money = 9998
// Date.now()
$scope.myDate = 1248324244873
$scope.msg = '我是中國(guó)人，我愛(ài)自己的祖國(guó)!'
$scope.arr =[1,2,3,8,4,6,0]
$scope.myJson = {a:{name:'小明',age:18},b:{name:'小紅',age:20}}
// 可以調(diào)用不同的過(guò)濾器得到相應(yīng)的結(jié)果
// 參數(shù)是一個(gè)過(guò)濾器的名字
// 返回值是一個(gè)方法
// : 第一個(gè)參數(shù)是需要處理的數(shù)據(jù)
// : 后面的參數(shù)是當(dāng)前過(guò)濾器本身需要的參數(shù)
$scope.result = $filter('currency')($scope.money,'￥')
}])
</script>
</body>
</html>
2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>filter</title>
</head>
<body ng-app="filterApp" ng-controller="fitlerController">
<div>
<input type="text" ng-model="search">
<ul>
<!-- 會(huì)到對(duì)應(yīng)的todos中尋找间驮，如果當(dāng)前元素有completed屬性且值 為
true就會(huì)被顯示出來(lái)躬厌。（只會(huì)到completed屬性中尋找） -->
<li ng-repeat="item in todos | filter : {completed:true} ">
{{item.name}},{{item.completed}}
</li>
</ul>
<ul>
<li ng-repeat="item in todos | filter : true ">
{{item.name}},{{item.completed}}
</li>
</ul>
</div>
<script src="libs/angular.js"></script>
<script>
// 1.創(chuàng)建模塊
var app = angular.module('filterApp', [])
// 2.創(chuàng)建控制器
app.controller('fitlerController', ['$scope',function($scope){
$scope.search=''
// 假設(shè)已經(jīng)得到數(shù)據(jù)
$scope.todos = [
{id:1,name:'吃飯',completed:true},
{id:2,name:'睡覺(jué)吃飯',completed:true},
{id:3,name:'打豆豆',completed:false},
{id:4,name:'學(xué)習(xí)', completed:true},
{id:5,name:'喝水,true',completed:false},
]
}])
</script>
</body>
</html>
