在学习笔记-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}}的详情页",十分简单,现在需要充实它,就拿一个大佬来看,结果就会变成这样:
需要实现一个功能是点击相对应图片,对应上面的大图就会被替换成小图,可以使用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}}" > </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>
到此为止,事件处理器和过滤器的例子就如同上述所讲了!
时间: 2024-11-05 16:01:56