Of Stack

Angularjs Dependent Compression and Custom Filter Writing

  • 2021-07-16 01:12:19
  • OfStack

The specific code is as follows: 


<!DOCTYPE html>
<html>
<body>
<header>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="angular.min.js"></script>
  <script src="filter.js"></script>
</header>
<div ng-app="myApp">
    <div ng-controller="firstController">
      {{name | rHello}}
      <br>
      {{name | rHello:3:5}} // 3 The parameters are ' input  , n1 , n2'
      <br>
      {{name | rJs}}
    </div>
</div>
<script type="text/javascript">
       var app=angular.module("myApp",['kk.filter']);  
       //kk.filter Is to use external filters for dependency injection 
 app.controller('firstController',['$scope',function($s){
/* The above line of code is to compress dependencies,   In controller  Used inside. firstController Is the controller name, $scope It must be correct abbreviation, can't be written at will, and can't be compressed. And function($s) , $s Yes $scope* Compressed writing, write at will /
   $s.name="Hello Angularjs";
 }]);
 app.filter('rHello',function(){
   return function(input,n1,n2){
      console.log(input);
      console.log(n1);
      console.log(n2);
      return input.replace(/Hello/, " How do you do ");
   }
 });
</script>
</body>
</html>

// Externally introduce filters for use 
var appFilter=angular.module( " kk.filter " ,[]); 
// Here's kk.filter  Is a dependent name   You can get up at will. As well as var appFilter The name of is also casual 
appFilter.filter( ' rJs',function(){ //  Filter name   Rise casually  
return function(input,n1,n2){ 
console.log(input); 
console.log(n1); 
console.log(n2); 
return input.replace(/js/,  " JavaScript " ); //  This is implemented by putting js  Replace with JavaScript (String)  
} 
});
Related articles: