在学习笔记-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