学习笔记-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}}的详情页",十分简单,现在需要充实它,就拿一个大佬来看,结果就会变成这样:

需要实现一个功能是点击相对应图片,对应上面的大图就会被替换成小图,可以使用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

学习笔记-AngularJs(六)的相关文章

《iOS应用逆向工程》学习笔记(六)使用dumpdecrypted砸壳

本来是打算用AppCrackr砸壳的,结果砸壳都是失败的,开始以为是App的加密太厉害了,后来才知道是因为AppCrackr太暴力了,引起公愤,结果被人投诉招致核心功能被迫关闭了. 幸好在RE官网搜到一个用dumpdecrypted砸壳的帖子.下面是我砸壳的经历. 一.造锤 1.下载dumpdecrypted源码 下载地址:https://github.com/stefanesser/dumpdecrypted/archive/master.zip,接着在Mac中解压. 2.确认iOS设备的版本

GDI+学习笔记(六)渐变画刷

画刷,顾名思义,就是像画刷一样,向设备上绘制,还记得小时候常唱的首歌,"我是一个粉刷匠.." 好吧,跑题了. 本系列博客希望尽可能简单的描述每项功能,而不希望把每个参数都介绍的详详细细,如果需要,请查阅msdn,本节讲述的渐变画刷,主要有两种,一种是叫线性画刷(LinearGradientBrush),还有一种叫路径画刷(PathGradientBrush),我希望以一种尽可能简单的方式去描述它,但能力有限,所以有什么意见,希望各位能帮忙提出,谢谢. (一)使用画刷 上一节中,我们实际

Opencv学习笔记(六)SURF学习笔记

原创文章,转载请注明出处:http://blog.csdn.net/crzy_sparrow/article/details/7392345 本人挺菜的,肯定有非常多错误纰漏之处 ,希望大家不吝指正. 看了harris角点检測之后,開始研究SURF角点检測,发现挺复杂的,一时也仅仅了解了大概,把了解的东西总结下,以便下次深入学习. SURF角点检測算法是对SIFT的一种改进,主要体如今速度上,效率更高.它和SIFT的主要差别是图像多尺度空间的构建方法不同. 在计算视觉领域,尺度空间被象征性的表述

汇编入门学习笔记 (六)—— si、di,双重循环

疯狂的暑假学习之  汇编入门学习笔记 (六)-- si.di,双重循环 参考: <汇编语言> 王爽 第7章 1. and和or指令,与[bx+idata] and和or,就不多说了. [bx+idata] 这样写是可以的,某些情况下,比较方便. [bx+idata] 也可以写成 idata[bx] 直接见例子: 把'ABcde' 跟 'fGHig' 都改成大写(ASCII中大写字母与小写字母二进制中,只有第五位不同,大写字母是0,小写字母是1) assume cs:code,ds:data d

学习笔记-AngularJs(九)

到目前为止,我们所做的学习案例都是没有加任何动画效果的,对于以往来说,我们经常会去使用一些动画插件或是css框架(如:animate.css)来点缀我们的网页,这样显得生动,高大上,那么接下来我们可以学习一下,怎么在AngularJs下来实现叼酷炫的动画操作,主要使用的命令是ngAnimate. 与之前的ngResource,ngRoute一样,需要注入ngAnimate和引入ng-animate.js才可以使用此服务,想在你的angular应用程序使用ngAnimate来实现动画功能,前提条件

Spring3.0官网文档学习笔记(六)--3.4.1

3.4 依赖 3.4.1 依赖注入 依赖注入两种方式:基于构造器的DI.基于setter方法的DI. 3.4.1.1 基于构造器的DI 参数是引入对象,且之前不存在父-子类关系: package x.y; public class Foo { public Foo(Bar bar, Baz baz) { // ... } } <beans> <bean id="foo" class="x.y.Foo"> <constructor-arg

《CSS网站布局实录》学习笔记(六)

第六章 CSS高级应用与技巧 6.1 id与class 6.1.1 什么是id id是XHTML元素的一个属性,用于标识对象名称.无论是class还是id,都是XHTML所支持的公共属性,并且也是其核心属性.class的主要功能是用来对对象的样式设置,而id除了可以定义样式外,还能够成为服务网站交互行为一个特殊标识.每一个被定义了id名称的对象,其id名字在每个页面有且仅能出现一次. 6.1.2 如何使用id 在不考虑使用JavaScript脚本,而是XHTML代码及CSS样式应用的情况下,应当

疯狂Android讲义 - 学习笔记(六)

第7章 7.1 使用简单图片 7.1.1 使用Drawable对象 7.1.2 Bitmap和BitmapFactory 7.2 绘图 7.2.1 Android绘图基础:Canvas.Paint等 Android的绘图应该继承View组件,并重写onDraw(Canvas canvas) 方法即可,Canvas代表了“依附”于指定View的画布.表7.1 Canvas的绘制方法 Paint代表了Canvas上的画笔,Paint类主要用于设置绘制风格,包括画笔颜色.画笔粗细.填充风格等. 7.2

[ExtJS学习笔记]第六节 Extjs的类系统Class System命名规则及定义和调试

本文地址: http://blog.csdn.net/sushengmiyan/article/details/38479079 本文作者:sushengmiyan -------------------------------------------------------------资源链接----------------------------------------------------------------------- 翻译来源  Sencha Cmd官方网站:    http: