学习笔记-AngularJs（六）

在学习笔记-AngularJs（五），通过引入bootstrap.css进行改写整个样式，这时学习项目也变得好看多了，现在我们又需要目录再进行一次改变，如下图：

这样就符合之前讲的对学习目录进行布置了！

angualrJs自带了一些默认的过滤器，如：

{{"xiaobin" | uppercase}}
{{"XIAOBIN" | lowercase}}
{{  | 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==){
                  $scope.people = data;
                  $scope.main_image = data.images[]; //需要初始化默认的大图
          }
      }).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="">{{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="">{{people.jian_intro}}</td></tr>
                      </table>
              </div>
            </div>
    </div>
    <div class="panel-footer">{{people.intro}}</div>
</div>

到此为止，事件处理器和过滤器的例子就如同上述所讲了！