学习笔记-AngularJs（六）
在学习笔记-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>
到此为止，事件处理器和过滤器的例子就如同上述所讲了！
