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

     

  • 相关阅读:
    leetcode:655. 输出二叉树
    leetcode:763. 划分字母区间
    leetcode:3. 无重复字符的最长子串
    leetcode:2. 两数相加
    leetcode每日一题:409. 最长回文串
    leetcode:1381. 设计一个支持增量操作的栈
    leetcode:1380. 矩阵中的幸运数
    [数据结构] 迷宫问题(栈和队列,深搜和广搜)
    [数据结构] N皇后问题
    [2011山东ACM省赛] Sequence (动态规划)
  • 原文地址:https://www.cnblogs.com/minghui007/p/7205938.html
Copyright © 2011-2022 走看看