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

关于组件化：

    将页面中可以重复使用的标签封装成一个组件，方便这一部分UI重复使用
    类似于JS中的函数，封装了一部分处理代码，通过函数调用就可以重复使用这些代码
封装一个简单的组件代码如下：

 
 

  
  

   
   

    
    [html] 
    
    view plain
    
     copy
    
    

    
     
   
   
  
  
  
  
<script>  
    var app = angular.module("myApp", []);  
  
    app.component("myComp", {  
        template:"<h1>组件化封装的内容<small>这是一个副标题</small></h1>"  
    });  
</script>  
 
 
调用方式：

 
 

  
  

   
   

    
    [html] 
    
    view plain
    
     copy
    
    

    
     
   
   
  
  
  
  
<my-comp></my-comp>  
 
 
过滤器：
过滤器可以使用一个管道字符（|）添加到表达式和指令中。
（1）字符串大小写转换过滤器
      代码如下：     
 
 

  
  

   
   

    
    [html] 
    
    view plain
    
     copy
    
    

    
     
   
   
  
  
  
  
<div ng-bind="name"></div>  
        <div ng-bind="name | uppercase"></div>  
        <div ng-bind="name | lowercase"></div>  
 
 
（2）长度限制过滤器      
      代码如下：

  
  

   
   

    
    

     
     [html] 
     
     view plain
     
      copy
     
     

     
      
    
    
   
   
   
   
长度：<input type="text" ng-model="length"><br />  
位置：<input type="text" ng-model="index">  
<br />  
<ul>  
    <li ng-repeat="u in users | limitTo:length:index">  
        <span ng-bind="u.userID"></span>****  
        <span ng-bind="u.username"></span>****  
        <span ng-bind="u.nickname"></span>  
    </li>  
</ul>  
  
  
（3）JSON过滤器
     代码如下：

  
  

   
   

    
    

     
     [html] 
     
     view plain
     
      copy
     
     

     
      
    
    
   
   
   
   
<span ng-bind="users|json"></span>  
  
  
（4）日期时间过滤器    
  
  

   
   

    
    

     
     [html] 
     
     view plain
     
      copy
     
     

     
      
    
    
   
   
   
   
<span ng-bind="date | date:'yyyy年MM月dd日 hh:mm:ss'"></span><br />  
            <span ng-bind="date | date:'yyyy年MM月dd日'"></span><br />  
            <span ng-bind="date | date:'hh:mm:ss'"></span><br />  
  
  
（5）货币格式过滤器

  
  

   
   

    
    

     
     [html] 
     
     view plain
     
      copy
     
     

     
      
    
    
   
   
   
   
货币过滤器输出：<span ng-bind="price | currency"></span><br />  
货币过滤器输出：<span ng-bind="price | currency:'人民币￥'"></span><br />  
货币过滤器输出：<span ng-bind="price | currency:'￥':3"></span><br />  
  
  
自定义过滤器：
 app.filter(name, fn):用于定义一个自定义过滤器
 name:过滤器名称
 fn:过滤器处理函数
 过滤器中，直接return function(value) {}
 通过闭包函数来实现数据处理，固定语法结构！
 value参数：第一个参数，用于接收要处理的数据：数据就是过滤器管道符前面变量中的数据

    
    

     
     

      
      

       
       [html] 
       
       view plain
       
        copy
       
       

       
        
      
      
     
     
     
     
<div ng-controller="myCtrl">  
    <div ng-bind="name"></div>  
    <div ng-bind="name | myfilter"></div>  
</div>  
    
    
    
    

     
     

      
      

       
       [html] 
       
       view plain
       
        copy
       
       

       
        
      
      
     
     
     
     
var app = angular.module("myApp", []);  
    app.filter("myfilter", function() {  
        return function(value) {  
            value = value.toUpperCase();  
            return value;  
        }  
    });  
    
    
    
    

     
     

      
      

       
       [html] 
       
       view plain
       
        copy
       
       

       
        
      
      
     
     
     
     
app.controller("myCtrl", function($scope) {  
        $scope.name = "jerry";  
    });  
     
     

      
      
     
     
    
    
标注：过滤器中的数据处理完成，一定要返回输出（return value）。否则页面上不会输出相关的信息。