angular怎么实现商品筛选功能

这篇文章主要为大家展示了“angular怎么实现商品筛选功能”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“angular怎么实现商品筛选功能”这篇文章吧。

为定远等地区用户提供了全套网页设计制作服务，及定远网站建设行业解决方案。主营业务为做网站、网站设计、定远网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

一、demo功能分析

1、通过service()创建数据并遍历渲染到页面
2、根据输入框的输入值进行字段查询
3、点击各列实现排序功能。

二、实现

1.1 数据定义与渲染

angular更偏向于是一个MVVM模式的框架，所以它的controller很薄，里面的业务逻辑也是少的，因此应该养成把逻辑写在service或者Factory等angular提供的可以自定义服务的方法中。此次demo通过angular的service方法来注册并定义商品数据。

angular.module("app",[])
.service("productData",function(){
  //通过service方法来定义数据，也可以通过factory方法来定义
  return [
    {
      id:1002,
      name:'HuaWei',
      quantity:200,
      price:4300
    },
    {
      id:2123,
      name:'iphone7',
      quantity:38,
      price:6300
    },
    {
      id:3001,
      name:'XiaoMi',
      quantity:3,
      price:2800
    },
    {
      id:4145,
      name:'Oppo',
      quantity:37,
      price:2100
    },
    {
      id:5563,
      name:'Vivo',
      quantity:23,
      price:2100
    }
  ]
})
//传入用service定义的productData数据依赖
.controller("myCtrl",function($scope,productData){
  $scope.data=productData; //进行相应赋值

  $scope.order=''; //单列排序用，后面详解
  $scope.changeOrder=function(type){
    $scope.orderType=type;
    if($scope.order===''){
      $scope.order='-';
    }else{
      $scope.order='';
    }
  }
})

数据渲染部分：

      
      
        产品编号
        产品各称
        产品价钱
      
      
      
      
        {{value.id}}
        {{value.name}}
        {{value.price}}
      
      

    

说明：上面利用了bootstrap的caret类名来显示出三角符号，并通过给父元素加dropup使三角符号转向。
1、三角符号的转向与否由ng-class指令确定，传入表达式，当order===‘ '时，为true，则给th加上dropup类名
2、用ng-click指令绑定点击事件，实现点击就切换排序方式

2.2 搜索功能

采用angular的filter过滤器，搜索输入字段

 搜索：
 
 
        {{value.id}}
        {{value.name}}
        {{value.price}}
      

2.3 排序功能

1、定义order属性用于设置正序还是反序
2、定义orderType属性用于设置参考排序的值
3、定义changeOrder（）方法用于实现点击就切换排序的功能

 $scope.order=''; //当order为‘'时正序
 $scope.changeOrder=function(type){ //传入属性名，以此为基准排序
   $scope.orderType=type;
   if($scope.order===''){
     $scope.order='-'; //order为'-'时，反序
   }else{
     $scope.order='';
   }
 }

页面中：changeOrder()函数传入“类型”作为参数，并在函数内部通过\ $scope.orderType=type;设定排序的参考类型

      
      
        产品编号
        产品各称
        产品价钱
      
      
      
        
          {{value.id}}
          {{value.name}}
          {{value.price}}
        
      
    

以上是“angular怎么实现商品筛选功能”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！