Angular基础入门---过滤器

Angular中过滤器结合指令系统可以快速的实现某些简单的业务逻辑。

说明

  1. Angular基础入门系列文章一共6篇,主要是为了github上“course-angular”仓库的一个说明性的小文章。
  2. 随着Vue、React的逐渐流行开来,Angular也发布了第二版,Angular1.x版使用开始减少,但是有时可能会遇到一些Angular1.x的一些问题,另外前端技术发展太快,技术一段时间不使用,就可能遗忘,这个小系列文章和github上的course-angular也是为了日后回头看看Angular相关基础之用。

Angular基础入门

  1. Angular基础入门–数据绑定和指令
  2. Angular基础入门—过滤器
  3. Angular基础入门—作用域和通信
  4. Angular基础入门—ng-Route
  5. Angular基础入门—ui-Router
  6. Angular基础入门—自定义指令(组件)

以下每个实例的公共的util工具类
common.util.js

1
2
3
4
5
6
module.exports = {
render: function(str){
var body = document.querySelector('body');
body.innerHTML = str + body.innerHTML;
}
}

limitTo和orderBy

demo7.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var demoTpl = require('../tpls/demo7.string');
var commonUtil = require('../utils/common.util.js');
commonUtil.render(demoTpl);
angular.module('myApp', [])
.controller('myController', function($scope){
var items = [
{title: '权利的游戏', subscribe: true, updated: 1458691234},
{title: '真探', subscribe: false, updated: 1458777656},
{title: '黑吃黑', subscribe: true, updated: 1458864234},
{title: '大西洋帝国', subscribe: true, updated: 1458950499},
{title: '罗马', subscribe: false, updated: 1459036887}
];
$scope.items = items;
$scope.limit = 4;
$scope.price = 234.56;
});

demo7.string

1
2
3
4
5
6
7
8
9
10
11
<div ng-controller="myController">
<input type="text" ng-model="limit">
<div>{{price | currency: '¥'}}</div>
<ul>
<li ng-repeat="item in items | limitTo:limit | orderBy:'-updated'">
<span>名字:{{item.title}}</span>
<span>是否发布:<b ng-class="{'sub': item.subscribe}"></b></span>
<span>跟新时间:{{item.updated | date:'yyyy年MM月dd日,HH:mm'}}</span>
</li>
</ul>
</div>

过滤器调用一个方法

demo8.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
var demoTpl = require('../tpls/demo8.string');
var commonUtil = require('../utils/common.util.js');
commonUtil.render(demoTpl);
angular.module('myApp', [])
.controller('myController', function($scope) {
var friends = [{
name: 'John',
phone: '555-1276'
}, {
name: 'Mary',
phone: '800-BIG-MARY'
}, {
name: 'Mike',
phone: '555-4321'
}, {
name: 'Adam',
phone: '555-5678'
}, {
name: 'Julie',
phone: '555-8765'
}, {
name: 'Juliette',
phone: '555-5678'
}];
$scope.friends = friends;
$scope.searchText = '';
$scope.search = function(value) {
if($scope.searchText != ""){
if(value.name.toLowerCase().indexOf($scope.searchText.toLowerCase()) != -1 || value.phone.toLowerCase().indexOf($scope.searchText.toLowerCase()) != -1) {
return true;
} else {
return false;
}
} else {
return true;
}
}
});

demo8.string

1
2
3
4
5
6
7
8
9
10
11
12
13
<div ng-controller="myController">
<div><input type="text" ng-model="searchText"></div>
<table border="1">
<tr>
<th>name</th>
<th>phone</th>
</tr>
<tr ng-repeat="f in friends | limitTo:10 | filter:search:value">
<td>{{f.name}}</td>
<td>{{f.phone}}</td>
</tr>
</table>
</div>

自定义过滤器

demo12.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
var demoTpl = require('../tpls/demo12.string');
var commonUtil = require('../utils/common.util.js');
commonUtil.render(demoTpl);
var myApp = angular.module('myApp', []);
myApp.filter('gender', function(){
return function(g){
switch(g) {
case 0:
return '男';
case 1:
return '女';
default:
return '其他';
}
};
});
myApp.controller('showController', function($scope) {
var persons = [
{
name: 'chping',
age: 21,
gender: 0
},
{
name: 'chengping',
age: 20,
gender: 0
},
{
name: 'chyan',
age: 19,
gender: 1
}
];
$scope.persons = persons;
});

demo12.string

1
2
3
4
5
6
7
<div>
<ul ng-controller="showController">
<li ng-repeat="p in persons">
{{p.name}}/{{p.age}}/{{p.gender | gender}}
</li>
</ul>
</div>

测试功能而已,你非要赏点我就没办法了...