angularjs过滤器传值 AngularJS 过滤器

angularjs过滤器传值

AngularJS过滤器是一种用于格式化数据的工具，它可以将原始数据转换为可读的格式。它们可以用来格式化日期、金钱、字符串等。AngularJS过滤器可以传递参数，这些参数将影响过滤器的行为。

AngularJS过滤器传值的方法是在过滤器后面加上一个冒号（:），然后跟上要传递的参数。例如：

{{ expression | filterName : parameter1 : parameter2 }}

在上面的例子中，expression 是要被过滤的表达式，filterName 是要使用的过滤器名称，parameter1 和 parameter2 是要传递给过滤器的参数。

AngularJS 还允许我们使用多个过滤器来处理表达式。例如：

{{ expression | filterName1 : parameter1 | filterName2 : parameter2 }}

在上面的例子中，expression 表达式将先被 filterName1 过滤器处理，然后再由 filterName2 进行处理。我们也可以使用不同类型的参数来传递给不同的过滤器。例如：

{{ expression | filterName1 : parameter1 | filterName2 : 'string' }}

在上面的例子中，filterName1 将使用 parameter1 作为参数而 filterName2 则使用字符串作为参数。此外，我们也可以使用 JavaScript 对象作为 AngularJS 过滤器传递的参数。例如：

{{ expression | filterName : { key: value } }} 
AngularJS 过滤器
AngularJS 过滤器 

AngularJS 过滤器可以用来格式化数据，过滤器能够用在表达式和指令中。




过滤器可以使用一个管道字符（|）添加到表达式和指令中。

 
AngularJS 过滤器
 
AngularJS 过滤器可用于转换数据：

    

        

            
过滤器
            
描述
        
        

            
currency
            
格式化数字为货币格式。
        
        

            
filter
            
从数组项中选择一个子集。
        
        

            
lowercase
            
格式化字符串为小写。
        
        

            
orderBy
            
根据某个表达式排列数组。
        
        

            
uppercase
            
格式化字符串为大写。
        
    




 
向表达式添加过滤器
 
过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。
（下面的两个实例，我们将使用前面章节中提到的 person 控制器）
uppercase 过滤器格式化字符串为大写：

     
AngularJS 实例
 
    

        
<div  ng-app="myApp"  ng-controller="personCtrl">

            

            
<p>姓名为 {{ lastName | uppercase }}</p>

            

            
</div>

        
    
    
 

lowercase 过滤器格式化字符串为小写：

     
AngularJS 实例
 
    

        
<div  ng-app="myApp"  ng-controller="personCtrl">

            

            
<p>姓名为 {{ lastName | lowercase }}</p>

            

            
</div>

        
    
    
 




 
currency 过滤器
 
currency 过滤器格式化数字为货币格式：

     
AngularJS 实例
 
    

        
<div  ng-app="myApp"  ng-controller="costCtrl">

            

            
<input  type="number"  ng-model="quantity">

            
<input  type="number"  ng-model="price">

            

            
<p>总价 = {{ (quantity * price) | currency }}</p>

            

            
</div>

        
    
    
 




 
向指令添加过滤器
 
过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中。
orderBy 过滤器根据某个表达式排列数组：

     
AngularJS 实例
 
    

        
<div  ng-app="myApp"  ng-controller="namesCtrl">

            

            
<ul>

            
  <li  ng-repeat="x in names | orderBy:"country"">

            
    {{ x.name + ", " + x.country }}

            
  </li>

            
</ul>

            

            
<div>

        
    
    
 




 
过滤输入
 
输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。
filter 过滤器从数组中选择一个子集：

     
AngularJS 实例
 
    

        
<div  ng-app="myApp"  ng-controller="namesCtrl">

            

            
<p><input  type="text"  ng-model="test"></p>

            

            
<ul>

            
  <li  ng-repeat="x in names | filter:test | orderBy:"country"">

            
    {{ (x.name | uppercase) + ", " + x.country }}

            
  </li>

            
</ul>

            

            
</div>