zoukankan      html  css  js  c++  java
  • angular学习笔记(十六) -- 自定义过滤器

    本篇主要介绍angular自定义的过滤器:

    直接看例子:

    复制代码
    <!DOCTYPE html>
    <html ng-app="MyFilter">
    <head>
      <title>13.2过滤器</title>
      <meta charset="utf-8">
      <script src="../angular.js"></script>
      <script src="script.js"></script>
      <style type="text/css">
        *{
          font-family:'MICROSOFT YAHEI';
          font-size:12px
        }
      </style>
    </head>
    <body>
    <div ng-controller="filter">
      <span>{{title_1 | titleCase: 1 }}</span>
      <br>
      <span>{{title_2 | titleCase: 2 }}</span>
    </div>
    </body>
    </html>
    复制代码
    复制代码
    var myFilter = angular.module('MyFilter',[]);
    myFilter.filter('titleCase',function(){
        var titlecase = function(title,num){
            var words = title.split(' ');
            for(var i=0; i<words.length; i++){
                words[i] = words[i].charAt(0).toUpperCase() + words[i].substring(1)
            }
            return num+'. '+words.join(' ')
        };
        return titlecase
    });
    myFilter.controller('filter',function($scope){
        $scope.title_1 = 'i am code bunny !';
        $scope.title_2 = 'i am white bunny !'
    });
    复制代码

     

    1. 首先要创建一个模块: MyFilter

    2. 给模块添加一个过滤器: titleCase

    创建过滤器的格式如下:

    myFilter.filter('titleCase',function(){
        var titlecase = function(title,num){
             ...
        };
        return titlecase
    });

    .filter的第一个参数为过滤器的名字,也就是在{{}}里面使用的名字,第二个参数是一个函数,函数需要再返回一个函数,被返回的函数,就是用来处理数据的函数,第一个参数就是需要被过滤的数据,后面的参数,就是在使用过滤器的时候,冒号后面传入的值. 比如这里的1:

    <span>{{title_1 | titleCase: 1 }}</span> 

    3. 创建控制器: filter 

    4. 创建变量title_1,title_2

     

  • 相关阅读:
    浏览器渲染原理
    React Router
    链式 add 函数
    函数防抖和函数节流
    242. 有效的字母异位词
    faker 生成模拟数据
    A 第五课 二叉树与图
    使用递归解决问题
    A 第四课 递归_回溯_分治
    A 第三课 贪心算法
  • 原文地址:https://www.cnblogs.com/minghui007/p/7205938.html
Copyright © 2011-2022 走看看