angular过滤器

angular过滤器

    • 基本过滤器
    • 自定义过滤器

基本过滤器

  • 基本用法 {{data|format}},数据|格式

angular过滤器_第1张图片

  • 代码

<html lang="en" ng-app="myapp">
<head>
    <meta charset="UTF-8">
head>
<body>
    <div ng-controller="MainCtrl as mc">
        {{ mc.name|uppercase}}
    div>
    <script src="http://cdn.staticfile.org/angular.js/1.4.6/angular.min.js">script>
    <script type="text/javascript">
    var myapp = angular.module("myapp", []);
    myapp.controller("MainCtrl", [function() {
        this.name = "lengyuexin"
    }]);
    script>


body>

html>
  • 效果图

在这里插入图片描述

  • 其他不演示了,可以参考菜鸟教程
  • http://www.runoob.com/angularjs/angularjs-filters.html

自定义过滤器


<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
head>
<body>
    <div ng-controller="MainCtrl as mc">
       <p>过滤前:{{mc.msg}}p> 
       <p>过滤后:{{mc.msg|reverse}}p>
    div>
    <script src="http://cdn.staticfile.org/angular.js/1.4.6/angular.min.js">script>
    <script type="text/javascript">
	  var app = angular.module('app', []);
		app.controller('MainCtrl',[function() {
		    this.msg = "hello";
		}]);
	   app.filter('reverse', function() { 
	     return function(text) {
	        return text.split("").reverse().join("");
	    }
	});
    script>
body>
html>
  • 效果图

在这里插入图片描述

学习资源推荐:https://blog.csdn.net/qq_42813491/article/details/90213353

你可能感兴趣的:(前端--angular)