1. 程式人生 > >Angular——自定義過濾器

Angular——自定義過濾器

視圖 lan bsp doctype html 進行 指導 src 就是

基本介紹

除了使用AngularJS內建過濾器外,還可以根業務需要自定義過濾器,通過模塊對象實例提供的filter方法自定義過濾器。

基本使用

(1)input是將綁定的數據以參數的形式傳入

(2)input後面的參數也就是:後面的參數,指導在視圖時候該如何傳遞參數

(3)filter方法的回調函數將函數作為返回值,最後這個函數會在視圖中進行調用,並且返回值

App.filter(‘demo‘, function () {
    return function (input, arg) {
      return input + ‘ Hello ‘ + arg;
    }
});
<!
DOCTYPE html> <html lang="en" ng-app="App"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../libs/angular.min.js"></script> </head> <body> <div ng-controller="DemoController"> <span>{{name|demo:123}}</
span><br> <span>{{text|capitalize}}</span> </div> <script> var App = angular.module(App, []); App.controller(DemoController, [$scope, function ($scope) { $scope.name = wqx; $scope.text = hello world; }]); App.filter(demo,
function () { return function (input, arg) { return input + Hello + arg; } }); App.filter(capitalize, function () { return function (input) { return input[0].toUpperCase() + input.slice(1); } }); </script> </body> </html>
//返回值
wqx Hello 123
Hello world

Angular——自定義過濾器