【Angular1】$filter的使用

忘是亡心i 2023-11-26 00:43 135阅读 0赞

### **AngularJS 过滤器**  ###

### 1. 在模板中使用filter ###

我们可以直接在\{ \{\}\}中使用filter，跟在表达式后面用 | 分割，语法如下：

{
       { expression | filter }}

也可以多个filter连用，上一个filter的输出将作为下一个filter的输入（怪不得这货长的跟管道一个样。。）

{
       { expression | filter1 | filter2 | ... }}

filter可以接收参数，参数用 : 进行分割，如下：

{
       { expression | filter:argument1:argument2:... }}

除了对\{ \{\}\}中的数据进行格式化，我们还可以在指令中使用filter，例如先对数组array进行过滤处理，然后再循环输出：

代码和html结果样式如下：

<table class="table table-bordered">
        <tr><td>过滤器</td><td>功能</td><td>原始数据</td><td>过滤后的数据</td></tr>
        <tr><td>uppercase</td><td>大小写转换</td><td>dream</td><td>{
       { "dream" | uppercase }}</td></tr>
        <tr><td>lowercase</td><td>大小写转换</td><td>XIONG</td><td>{
       { "XIONG" | lowercase }}</td></tr>
        <tr><td>date</td><td>日期格式化</td><td>1490161945000</td><td>{
       {1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}}</td></tr>
        <tr><td>number</td><td>保留小数</td><td>3.14159</td><td>{
       {3.14159 | number:2}}</td></tr>
        <tr><td>currency</td><td>货币格式化</td><td>666</td><td>{
       {666 | currency:"￥" }}</td></tr>
        <tr><td>limitTo</td><td>截取</td><td>1234567890</td><td>{
       {"1234567890" | limitTo:-4}}</td></tr>
        <tr><td>orderBy</td><td>排序</td><td>根id降序排</td><td>{
       { [{"id": 100,"age": 20,"name": "iphone"},
          {"id": 1,"age": 12,"name": "android"},
          {"id": 50,"age": 44,"name": "win"}
          ] | orderBy:'-id' }}</td></tr>
        <tr><td>orderBy</td><td>排序</td><td>根据id升序排</td><td>{
       { [{"id": 100,"age": 20,"name": "iphone"},
          {"id": 1,"age": 12,"name": "android"},
          {"id": 50,"age": 44,"name": "win"}
          ] | orderBy:'id' }}</td></tr>
        <tr><td>filter</td><td>查找</td><td>查找name为iphone的行</td><td>{
       { [{"id": 100,"age": 20,"name": "iphone"},
          {"id": 1,"age": 12,"name": "android"},
          {"id": 50,"age": 44,"name": "win"}
          ] | filter:{'name':'iphone'} }}</td></tr>
      </table>

###  ###

<table> 
 <tbody> 
  <tr> 
   <td style="width:110px;">过滤器</td> 
   <td style="width:155px;">功能</td> 
   <td style="width:230px;">原始数据</td> 
   <td style="width:354px;">过滤后的数据</td> 
  </tr> 
  <tr> 
   <td style="width:110px;">uppercase</td> 
   <td style="width:155px;">大小写转换</td> 
   <td style="width:230px;">dream</td> 
   <td style="width:354px;">DREAM</td> 
  </tr> 
  <tr> 
   <td style="width:110px;">lowercase</td> 
   <td style="width:155px;">大小写转换</td> 
   <td style="width:230px;">XIONG</td> 
   <td style="width:354px;">xiong</td> 
  </tr> 
  <tr> 
   <td style="width:110px;">date</td> 
   <td style="width:155px;">日期格式化</td> 
   <td style="width:230px;">1490161945000</td> 
   <td style="width:354px;">2017-03-22 13:52:25</td> 
  </tr> 
  <tr> 
   <td style="width:110px;">number</td> 
   <td style="width:155px;">保留小数</td> 
   <td style="width:230px;">3.14159</td> 
   <td style="width:354px;">3.14</td> 
  </tr> 
  <tr> 
   <td style="width:110px;">currency</td> 
   <td style="width:155px;">货币格式化</td> 
   <td style="width:230px;">666</td> 
   <td style="width:354px;">￥666.00</td> 
  </tr> 
  <tr> 
   <td style="width:110px;">limitTo</td> 
   <td style="width:155px;">截取</td> 
   <td style="width:230px;">1234567890</td> 
   <td style="width:354px;">7890</td> 
  </tr> 
  <tr> 
   <td style="width:110px;">orderBy</td> 
   <td style="width:155px;">排序</td> 
   <td style="width:230px;">根id降序排</td> 
   <td style="width:354px;">[{"id":100,"age":20,"name":"iphone"},{"id":50,"age":44,"name":"win"},{"id":1,"age":12,"name":"android"}]</td> 
  </tr> 
  <tr> 
   <td style="width:110px;">orderBy</td> 
   <td style="width:155px;">排序</td> 
   <td style="width:230px;">根据id升序排</td> 
   <td style="width:354px;">[{"id":1,"age":12,"name":"android"},{"id":50,"age":44,"name":"win"},{"id":100,"age":20,"name":"iphone"}]</td> 
  </tr> 
  <tr> 
   <td style="width:110px;">filter</td> 
   <td style="width:155px;">查找</td> 
   <td style="width:230px;">查找name为iphone的行</td> 
   <td style="width:354px;">[{"id":100,"age":20,"name":"iphone"}]</td> 
  </tr> 
 </tbody> 
</table>

### 2.在controller或service中使用filter ###

我们的js代码中也可以使用过滤器，方式就是我们熟悉的依赖注入，例如我要在controller中（service中）使用currency过滤器，只需将它注入到该controller中（service中）即可，代码如下：

此时你可能会有疑惑，如果我要在controller中使用多个filter，难道要一个一个注入吗，这岂不太费劲了？

莫着急~ng提供了一个filter服务可以来调用所需的filter，可以达到同样的效果，使用方法如下：