AngularJs中组件、过滤器、自定义过滤器的使用

今天跟大家分享一些关于组件、过滤器、自定义过滤器方面的知识
组件化:
    将页面中可以重复使用的标签封装成一个组件,方便这一部分UI重复使用
    类似于JS中的函数,封装了一部分处理代码,通过函数调用就可以重复使用这些代码
封装一个简单的组件代码如下:
调用方式:
过滤器:
过滤器可以使用一个管道字符(|)添加到表达式和指令中。
(1)字符串大小写转换过滤器
代码如下:
(2)长度限制过滤器
      代码如下:
        长度:
位置:
  • **** ****
(3)JSON过滤器
代码如下:
(4)日期时间过滤器



(5)货币格式过滤器
        货币过滤器输出:
货币过滤器输出:
货币过滤器输出:
自定义过滤器:
 app.filter(name, fn):用于定义一个自定义过滤器
 name:过滤器名称
 fn:过滤器处理函数
 过滤器中,直接return function(value) {}
 通过闭包函数来实现数据处理,固定语法结构!
 value参数:第一个参数,用于接收要处理的数据:数据就是过滤器管道符前面变量中的数据
var app = angular.module("myApp", []);
    app.filter("myfilter", function() {
        return function(value) {
            value = value.toUpperCase();
            return value;
        }
    });
app.controller("myCtrl", function($scope) {
        $scope.name = "jerry";
    });
标注:过滤器中的数据处理完成,一定要返回输出(return value)。否则页面上不会输出相关的信息。















 

你可能感兴趣的:(AngularJs中组件、过滤器、自定义过滤器的使用)