• angular 过滤排序


     1 <table class="table">
     2     <thead>
     3     <tr>
     4         <th ng-click="changeOrder('id')" ng-class="{dropup:order === ''}">
     5             产品编号
     6             <span ng-class="{orderColor:orderType === 'id'}" class="caret"></span>
     7         </th>
     8         <th ng-click="changeOrder('name')"  ng-class="{'dropup':order === ''}">
     9             产品名字
    10             <span ng-class="{orderColor:orderType === 'name'}" class="caret"></span>
    11         </th>
    12         <th ng-click="changeOrder('price')"  ng-class="{'dropup':order === ''}">
    13             产品价格
    14             <span ng-class="{orderColor:orderType === 'price'}" class="caret"></span>
    15         </th>
    16     </tr>
    17     </thead>
    18     <tbody>
    19      <tr ng-repeat="product in productData | filter:search | orderBy:order+orderType">
    20          <td>
    21              {{product.id}}
    22          </td>
    23          <td>
    24              {{product.name}}
    25          </td>
    26          <td>
    27              {{product.price}}
    28          </td>
    29      </tr>
    30     </tbody>
    31     </table>
     1   var myapp = angular.module('product',[])
     2 
     3     .service("productData",function(){
     4         return[
     5             {
     6                 id:1000,
     7                 name:"iphone5s",
     8                 price:4300
     9             },
    10             {
    11                 id:3300,
    12                 name:"iphone5",
    13                 price:3300
    14             },
    15             {
    16                 id:232,
    17                 name:"mac",
    18                 price:23000
    19             },
    20             {
    21                 id:1400,
    22                 name:"ipad",
    23                 price:6900
    24             }
    25         ]
    26     })
    27             myapp.controller("productController",function($scope,productData){
    28                 $scope.productData = productData;
    29                 $scope.orderType ='id';
    30                 $scope.order = '-';
    31                 $scope.changeOrder =function(type){
    32                     $scope.orderType = type;
    33                     if($scope.order === ''){
    34                         $scope.order = '-';
    35                     }else{
    36                         $scope.order = '';
    37                     }
    38                 }
    39 
    40 })

     在AngularJS的世界里,filter提供了一种格式化数据的方法,Angular也提供给我们了很多内建的过滤器,并且建立自定义过滤器也是相当的简单

  • 相关阅读:
    suse10+samba+ldap搭建pdc备忘
    深入挖掘Windows脚本技术(转自http://www.yuanma.org/data/2006/1212/article_1935.htm)
    Getting Paging working with Mitel Phones
    CentOS4.4+Samba+LDAP备忘
    oracle字符集问题
    Trixbox(Asterisk)+sangoma A101D+PBX
    Some useful vba macros
    (转载)wipe.c and z2.c
    Trixbox2.2+webmeetme2.2
    (转载)hosts.equiv和.rhosts文件
  • 原文地址:https://www.cnblogs.com/bhan/p/5428529.html
Copyright © 2020-2023  润新知