在学习笔记-AngularJs（五），通过引入bootstrap.css进行改写整个样式，这时学习项目也变得好看多了，现在我们又需要目录再进行一次改变，如下图：
这样就符合之前讲的对学习目录进行布置了！
angualrJs自带了一些默认的过滤器，如：
{{"xiaobin" | uppercase}}
{{"XIAOBIN" | lowercase}}
{{ 1304375948024 | date:"yyyy-MM-dd"}}
{{ {"foo":"dddd","far":"ddddddd"} | join}}现在我们来学一下怎么自定义过滤器，在js文件中添加filters.js，加入一下代码：
var phoneFilter = angular.module('phoneFilter', []);
phoneFilter.filter("checkHun",function(){
return function(input){ //input表示的是需要过滤的参数
return input ? '\u2718': '\u2713' ; //这里是对人物的婚姻状态进行判断要嘛打勾要嘛打叉
};
});当然这里建立phoneFilter模块，同时需要在app.js进行依赖，随便对之后的服务、指令等进行，代码如下：
var phonecat = angular.module('phonecat', ['ngRoute','phoneController','phoneFilter','phoneService','ngResource']); //[....]依赖注入 那在模板使用自定义的过滤器，可以这样使用：
{{phone.is_h | checkHun }} //当然需要在之前的phone.json再对应去添加一个is_h婚姻状态对于angularJs也有事件处理器，都是通过ng-*的形式来触发写在controllers.js的控制器文件的，如：ng-click，ng-keydown等等！现在来看一下，对于之前phone-detail.html中，就只有怎么一句话："这是phoneId为{{phoneId}}的详情页"，十分简单，现在需要充实它，就拿一个大佬来看，结果就会变成这样http://t.cn/RUbL4rP：
需要实现一个功能是点击相对应图片，对应上面的大图就会被替换成小图，可以使用ng-click来绑定一个函数实现这个功能，于是建立个1.json来储存数据，如下(内容可以自己去找)：
{
"intro": "...",
"gaikuang": {
"name": "马云",
"n_name": "风清扬（阿里内部的花名）",
"birth":"1964年9月10日",
"y_name":"Jackma",
"from": "中华人民共和国",
"zuji":"汉族",
"birth_d": "浙江省杭州市"
},
"jian_intro" : "...",
"beijing": " 企业家",
"school": "杭州师范学院，获外语学士学位",
"images":[
"image/yun.jpg",
"image/yun1.jpg",
"image/yun2.jpg",
"image/yun3.jpg" //图片可以自己找
],
"others": {
"jiguan":"浙江嵊州谷来镇，后父母移居杭州",
"xueli":"本科",
"xuexing":"o型",
"wife":"张英",
"xingzuo":"处女座"
}
}我们可以使用之前讲过的那个$http服务来拉取数据，我需要实现的是从#/phones/{{phone.id}}中的phone.id来拉取数据，也就是id=1（可以怎么理解），还记得之前引入的ngRoute模块吗？它有个$routeParams服务，可以通过$routeParams.phoneId获取id了，那么就可以通过$http服务来获取了，控制器代码如下：
phoneController.controller("phone-detail-controller",["$scope",'$routeParams',"$http",function($scope,$routeParams,$http){ //注入$routeParams服务
$http.get("json/" $routeParams.phoneId ".json").success(function(data, status, headers, config) {
if(status==200){
$scope.people = data;
$scope.main_image = data.images[0]; //需要初始化默认的大图
}
}).error(function() {
$scope.message = "获取不到此人的详细信息"
});
//关键在这，事件处理器触发的函数
$scope.setImage=function(url){
$scope.main_image = url;
}
}]);模板文件如下：
<div class="panel panel-primary">
<div class="panel-heading">人物简介</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-4">
<div class="thumbnail col-xs-12">
<img ng-src="{{main_image}}" alt="">
</div>
<!--添加事件处理器的demo-->
<div ng-repeat="imgurl in people.images" class="thumbnail col-xs-3">
<img ng-src="{{imgurl}}" ng-click="setImage(imgurl);" alt="">
</div>
</div>
<div class="col-xs-8">
<table class="table">
<tr><td colspan="3">{{people.gaikuang.name}}</td> </tr>
<tr>
<td>个人背景</td>
<td>职业：{{people.beijing}}</td>
<td>毕业院校：{{people.school}}</td>
</tr>
<tr>
<td>个人概况</td>
<td>中文名：{{people.gaikuang.name}} <br> 别名：{{people.gaikuang.n_name}} <br> 民族：{{people.gaikuang.zuji}} <br> 出生日期：{{people.gaikuang.birth}}</td>
<td>外文名：{{people.gaikuang.y_name}} <br> 国籍：{{people.gaikuang.form}} <br> 出生地：{{people.gaikuang.birth_d}}</td>
</tr>
<tr>
<td>其他信息</td>
<td> 籍贯：{{people.others.jiguan}} <br> 血型：{{people.others.xuexing}}</td>
<td> 学历：{{people.others.xueli}} <br> 妻子：{{people.others.wife}} <br> 星座：{{people.others.xingzuo}}</td>
</tr>
<tr><td colspan="3">{{people.jian_intro}}</td></tr>
</table>
</div>
</div>
</div>
<div class="panel-footer">{{people.intro}}</div>
</div>到此为止，事件处理器和过滤器的例子就如同上述所讲了！
更多专业前端知识，请上 【猿2048】www.mk2048.com