极乐门资源网

AngularJS 霸道的过滤器小结
网络编程 2025/1/12 佚名
2 0
极乐门资源网 Design By www.ioogu.com

一、为什么使用过滤器？

在实际操作中，我们需要对统一数据源进行多次转换，比如我的货币单位，在不同的国家我们将用不同的符号表示。因此，你可能会想到在控制器中判断国家以显示不同的结果，但是过滤器却可以更好的帮助我们做到同样的效果。

过滤器将数据在被指令处理并显示到视图之前进行转换，而不必修改作用域中原有的数据，这样能够允许同一份数据在应用中的不同部分以不同形式得以展示。

接下来，我们详细讨论有关过滤器的用法

二、过滤单个数据的值

下表展示用于单个数据的内置过滤器

AngularJS 霸道的过滤器小结 

先来看看我们的准备案例，待会我们将在这个案例的基础上来使用内容过滤器

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
  <title>Angluar test</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
  <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</head>
<body>
  <dlv class="panel panel-default" ng-controller="defaultCtrl">
    <div class="panel panel-header">
      Products
      <span class="label label-primary">{{products.length}}</span>
    </div>
    <div class="panel panel-body">
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr><th>Name</th><th>Category</th><th>Expiry</th><th>Price</th></tr>
        </thead>
        <tbody>
          <tr ng-repeat="p in products">
            <td>{{p.name}}</td>
            <td>{{p.category}}</td>
            <td>{{p.expiry}}</td>
            <td>{{p.price}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </dlv>

<script type="text/javascript" src="/UploadFiles/2021-04-02/angular.min.js">


就是一个表格的形式来展示产品的详细情况的案例 




AngularJS 霸道的过滤器小结


1.格式化货币值





<tr ng-repeat="p in products">
  <td>{{p.name}}</td>
  <td>{{p.category}}</td>
  <td>{{p.expiry}}</td>
  <!-- 使用currency -->
  <td>{{p.price | currency}}</td>
</tr>





AngularJS 霸道的过滤器小结


2.格式化数字值





<tr ng-repeat="p in products">
  <td>{{p.name}}</td>
  <td>{{p.category}}</td>
  <td>{{p.expiry}}</td>
  <!-- 保留小数点后3位 -->
  <td>{{p.price | number : 3}}</td>
</tr>





AngularJS 霸道的过滤器小结


3.格式化日期





// 在控制器中添加
$scope.getExpiryDate = function (days) {
  var now = new Date();
  return now.setDate(now.getDate() + days);
}








<tr ng-repeat="p in products">
  <td>{{p.name}}</td>
  <td>{{p.category}}</td>
  <!-- 在视图中使用-->
  <td>{{getExpiryDate(p.expiry) | date : 'yyyy/MM/dd'}}</td>
  <!-- 货币单位本地化 -->
  <td>{{p.price}}</td>
</tr>





AngularJS 霸道的过滤器小结


4.改变字符串大小写





<tr ng-repeat="p in products">
  <!-- 字母大小写 -->
  <td>{{p.name | uppercase}}</td>
  <td>{{p.category | lowercase}}</td>
  <td>{{getExpiryDate(p.expiry) | date : 'yyyy/MM/dd'}}</td>
  <!-- 货币单位本地化 -->
  <td>{{p.price}}</td>
</tr>





AngularJS 霸道的过滤器小结


5.生成JSON





<tr ng-repeat="p in products">
  <!-- 生成JSON数据 -->
  <td>{{p.name | json}}</td>
  <td>{{p.category}}</td>
  <td>{{getExpiryDate(p.expiry) | date : 'yyyy/MM/dd'}}</td>
  <!-- 货币单位本地化 -->
  <td>{{p.price}}</td>
</tr>





AngularJS 霸道的过滤器小结


6.本地化过滤器输出 




需要移入本地化JS文件





<!-- 引入本地化文件 -->
<script type="text/javascript" src="/UploadFiles/2021-04-02/angular-locale_zh-cn.js">





<tr ng-repeat="p in products">
  <td>{{p.name}}</td>
  <td>{{p.category}}</td>
  <td>{{p.expiry}}</td>
  <!-- 货币单位本地化 -->
  <td>{{p.price | currency}}</td>
</tr>





AngularJS 霸道的过滤器小结


三、过滤集合 




1.限制项目的数量—limitTo过滤器





<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
  <title>Angluar test</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
  <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</head>
<body>
  <dlv class="panel panel-default" ng-controller="defaultCtrl">
    <div class="panel panel-header">
      Products
      <span class="label label-primary">{{products.length}}</span>
    </div>
    <div class="panel panel-body">
      Limit: <select ng-model="limitVal" ng-options="item for item in limitRange"></select>
    </div>
    <div class="panel panel-body">
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr><th>Name</th><th>Category</th><th>Expiry</th><th>Price</th></tr>
        </thead>
        <tbody>
          <!-- 只显示limitVal行 -->
          <tr ng-repeat="p in products | limitTo : limitVal">
            <td>{{p.name}}</td>
            <td>{{p.category}}</td>
            <td>{{p.expiry}}</td>
            <td>{{p.price | number : 2}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </dlv>
<script type="text/javascript" src="/UploadFiles/2021-04-02/angular.min.js">


单击下拉列表，根据提示显示不同的条数，负数表示从后往前取 




AngularJS 霸道的过滤器小结


2.选取项—filter过滤器





<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
  <title>Angluar test</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
  <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</head>
<body>
  <dlv class="panel panel-default" ng-controller="defaultCtrl">
    <div class="panel panel-header">
      Products
      <span class="label label-primary">{{products.length}}</span>
    </div>

    <div class="panel panel-body">
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr><th>Name</th><th>Category</th><th>Expiry</th><th>Price</th></tr>
        </thead>
        <tbody>
          <!-- 自定义过滤 -->
          <tr ng-repeat="p in products | filter : selectItems">
            <td>{{p.name}}</td>
            <td>{{p.category}}</td>
            <td>{{p.expiry}}</td>
            <td>{{p.price | number : 2}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </dlv>
<script type="text/javascript" src="/UploadFiles/2021-04-02/angular.min.js">


仅仅保留类别为Fish或者name=='Beer'的行 




AngularJS 霸道的过滤器小结


3.对项目进行排序—orderBy过滤器





<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
  <title>Angluar test</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
  <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</head>
<body>
  <dlv class="panel panel-default" ng-controller="defaultCtrl">
    <div class="panel panel-header">
      Products
      <span class="label label-primary">{{products.length}}</span>
    </div>

    <div class="panel panel-body">
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr><th>Name</th><th>Category</th><th>Expiry</th><th>Price</th></tr>
        </thead>
        <tbody>
          <!-- 通过价格按照升序排列 -->
          <!-- <tr ng-repeat="p in products | orderBy : 'price'"> -->
          <!-- price前加-表示按照降序排列 -->
          <!-- <tr ng-repeat="p in products | orderBy : '-price'"> -->
          <!-- 自定义排序 -->
          <!-- <tr ng-repeat="p in products | orderBy : customOrder"> -->
          <!-- 组合排序，保质期<5的降序排列，其他的按照价格升序排序 -->
          <tr ng-repeat="p in products | orderBy : [customOrder, '-price']">
            <td>{{p.name}}</td>
            <td>{{p.category}}</td>
            <td>{{p.expiry}}</td>
            <td>{{p.price | number : 2}}</td>

          </tr>
        </tbody>
      </table>
    </div>
  </dlv>

<script type="text/javascript" src="/UploadFiles/2021-04-02/angular.min.js"> 




四、链式过滤器 




就是将过滤器串联起来综合使用





<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
  <title>Angluar test</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
  <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</head>
<body>
  <dlv class="panel panel-default" ng-controller="defaultCtrl">
    <div class="panel panel-header">
      Products
      <span class="label label-primary">{{products.length}}</span>
    </div>

    <div class="panel panel-body">
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr><th>Name</th><th>Category</th><th>Expiry</th><th>Price</th></tr>
        </thead>
        <tbody>
          <!-- 过滤链条，通过orderBy和limitTo共同作用 -->
          <tr ng-repeat="p in products | orderBy : [customOrder, '-price'] | limitTo : 5">
            <td>{{p.name}}</td>
            <td>{{p.category}}</td>
            <td>{{p.expiry}}</td>
            <td>{{p.price | number : 2}}</td>

          </tr>
        </tbody>
      </table>
    </div>
  </dlv>

<script type="text/javascript" src="/UploadFiles/2021-04-02/angular.min.js">



<tr ng-repeat="p in products | orderBy : [customOrder, '-price'] | limitTo : 5">





AngularJS 霸道的过滤器小结


五、自定义过滤器 




1.创建格式化数据值的过滤器





<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
  <title>Angluar test</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
  <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</head>
<body>
  <dlv class="panel panel-default" ng-controller="defaultCtrl">
    <div class="panel panel-header">
      Products
      <span class="label label-primary">{{products.length}}</span>
    </div>

    <div class="panel panel-body">
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr><th>Name</th><th>Category</th><th>Expiry</th><th>Price</th></tr>
        </thead>
        <tbody>

          <tr ng-repeat="p in products">
            <!-- 使用自定义过滤器 -->
            <td>{{p.name | labelCase}}</td>
            <td>{{p.category | labelCase : true}}</td>
            <td>{{p.expiry}}</td>
            <td>{{p.price | number : 2}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </dlv>

<script type="text/javascript" src="/UploadFiles/2021-04-02/angular.min.js">


自定义过滤器，labelCase反转字符串





// js/createFilters.js文件
angular.module("exampleApp")
  .filter("labelCase", function () {
    return function (value, reverse) {
      if (angular.isString(value)) {
        var inter = reverse "" alt="这里写图片描述" src="/UploadFiles/2021-04-02/2017042614100122.png"> 


2.创建集合过滤器 




在createFilter中定义一个skip过滤函数





angular.module("exampleApp")
  .filter("labelCase", function () {
    return function (value, reverse) {
      if (angular.isString(value)) {
        var inter = reverse "skip", function () {
    return function (value, count) {
      if (angular.isArray(value) && angular.isNumber(count)){
        if (count > value.length || count < 0) {
          return value;
        } else {
          // 跳过数组前两项
          return value.slice(count);
        }
      } else {
        return value;
      }
    }
  })







在视图中使用





<tr ng-repeat="p in products | skip : 2">
  <!-- 使用自定义过滤器 -->
  <td>{{p.name | labelCase}}</td>
  <td>{{p.category | labelCase : true}}</td>
  <td>{{p.expiry}}</td>
  <td>{{p.price | number : 2}}</td>
</tr>







移除前两项Apples和Bananas，然后显示 




AngularJS 霸道的过滤器小结


3.在已有的过滤器上搭建新的过滤器 




在createFilter中添加take过滤器返回，将skip和limitTo两个过滤器方法综合起来





angular.module("exampleApp")
  .filter("labelCase", function () {
    return function (value, reverse) {
      if (angular.isString(value)) {
        var inter = reverse "skip", function () {
    return function (value, count) {
      if (angular.isArray(value) && angular.isNumber(count)){
        if (count > value.length || count < 0) {
          return value;
        } else {
          // 跳过数组前两项
          return value.slice(count);
        }
      } else {
        return value;
      }
    }
  })
  // 在已有过滤器的基础上建立新的过滤器
  // 将上述的skip和limit两个过滤器合并
  .filter("take", function ($filter) {
    return function (data, skipCount, limitCount) {
      // 先跳过数组的前skipCount项
      var skipData = $filter("skip")(data, skipCount);
      // 接着只取limitCount行
      return $filter("limitTo")(skipData, limitCount);
    }
  })







在视图中使用：





<tr ng-repeat="p in products | take : 2 : 5">
<!-- 使用自定义过滤器 -->
  <td>{{p.name | labelCase}}</td>
  <td>{{p.category | labelCase : true}}</td>
  <td>{{p.expiry}}</td>
  <td>{{p.price | number : 2}}</td>
</tr>





先移除两项，然后值取5条数据 




AngularJS 霸道的过滤器小结


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。


                                

                                

                                     

                                

                                    标签：
                                        
angularjs,过滤器,angularjs,filter用法,angularjs中的过滤器

                                     

                                
极乐门资源网 Design By www.ioogu.com

                            

                        

                        

                            

                                极乐门资源网
                                免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
                                如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
                            

                        

                        

                            
                            
                        

                        
                        
极乐门资源网 Design By www.ioogu.com

                        

                            

                                
                                
                                    评论“AngularJS 霸道的过滤器小结”
                                
                            

                            

                                

                                    
                                    

                                    

                                        
暂无AngularJS 霸道的过滤器小结的评论...

                                    

                                

                            

                        

                        
                    

                    

                        

                            

                                

                                    

                                        

                                    

                                    

                                        

                                            
                                        

                                    

                                

                                

                                    
www.ioogu.com
                                            
                                                极乐门资源网 
                                    

                                    

                                        

                                            
                                        

                                        

                                            
                                        

                                        

                                            
                                        

                                        

                                            
                                        

                                    

                                    

                                    

                                        

                                            139,976影音资源
                                        

                                        

                                            144,792福利资源
                                        

                                        

                                            21,817软件资源
                                        

                                        

                                            631,128技术资源
                                        

                                    

                                

                            

                            
                            
                            
                        

                    

                

            

            
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

            

                

                    

                        

                            
更新日志

                        

                        

                            
                        

                    

                

            

            

                

                    友情链接 

                

                    

                        杰晶网络
                        DDR爱好者之家
                        桃源资源网
                        杰网资源
                        富贵资源网
                        南强小屋
                        铁雪资源网
                        幽灵资源网
                        万梅资源网
                        狼山资源网
                        白云岛资源网
                        昆仑资源网
                        相思资源网
                        明霞山资源网
                        内蒙古资源网
                        黑松山资源网
                        茶园资源网
                        饿虎岗资源网
                        大旗谷资源网
                        常春岛资源网
                        岱庙资源网
                        兴国资源网
                        快活林资源网
                        蝙蝠岛资源网
                        帝王谷资源网
                        白云城资源网
                        伏龙阁资源网
                        清风细雨楼
                        天枫庄资源网
                        圆月山庄资源网
                        无争山庄资源网
                        神水资源网
                        移花宫资源网
                        神剑山庄资源网
                        无为清净楼资源网
                        金钱帮资源网
                        丐帮资源网
                        华山资源网
                        极乐门资源网
                        小李飞刀资源网
                        凤求凰客栈
                        风云阁资源网
                        金狮镖局
                        鸳鸯亭资源网
                        千金楼资源网
                        更多链接
                    

                

            

            
极乐门资源网 Design By www.ioogu.com