AngularJs 指令和过滤器实现分页

这里实际上实现的不是分页，不过跟分页功能比较类似了。这里实现的功能是 限制每一列显示商品的数量，这一列显示不下的 将会显示在下一列以此类推。

1、最终效果图

效果图.png

2、Html 页面代码

其中 productList 是在指令中定义的一个数组，其中存着商品分成的列数。
productArray 也是在指令中定义的一个数组，其中存着当前符合条件的商品信息。
productFil 是自己定义的过滤器，用来过滤当前列要显示的商品。

<!-- 自己定义的指令 -->
<my-nav-child ></my-nav-child>
<!-- 指令调用模板页 代码-->
<ul ng-switch-when="false" ng-repeat="pageN in productList" class="menu_ul">
        <li ng-repeat="product in productArray  | productFil:pageN" >
            <a href="#">
                ![](img/product/{{product.img}}.jpg)
                <span>{{product.name}}</span>
            </a>
            <a href="#"  id="xg" ng-if="parentItem.id==1">选购</a>
        </li>
</ul>

3、自己定义的指令

directive('myNavChild',function(){
  return{
       restrict:'AE',
       templateUrl:'js/view/navChild.html',
       replace:true,
       link:function(scope,elem,attrs){
          /*定义一个数组，用来判断有没有商品,如果没有商品列表就不显示*/
          scope.productArray=[];
          scope.productList=[];
          //每一列最多能显示6个商品
          scope.pageSize=6;
        //把符合条件的商品信息存入数组productArray
          angular.forEach(scope.navChildProduct,function(childItem){
                  if(scope.parentItem.id==childItem.fl_id){
                      scope.productArray.push(childItem);
                  }
           });
          //左侧菜单商品显示列数
          scope.page=Math.ceil(scope.productArray.length/scope.pageSize);
               for(var i=1;i<=scope.page;i++){
                  //把每一列都进productList这数组中
                     scope.productList.push(i);
               }
         }
    }
});

3、自己定义的过滤器

angular.module('menuFilter',[])
  .filter('productFil',function(){
    return function(input,page){
        //input 是要过滤的内容，page是传过来的参数
        //slice()函数   (开始，结束),返回一个数组
       return input.slice(((page-1)*6),page*6);
    }
  });