Angular——自定義過濾器
阿新 • • 發佈:2018-02-04
視圖 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——自定義過濾器