源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

angular实现商品筛选功能

  • 时间:2021-02-08 11:59 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:angular实现商品筛选功能
[b]一、demo功能分析[/b] 1、通过service()创建数据并遍历渲染到页面 2、根据输入框的输入值进行字段查询 3、点击各列实现排序功能。 [b]二、实现[/b] 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='';
    }
  }
})


数据渲染部分:
<table class="table">
      <thead>
      <tr>
        <th ng-class="{dropup:order===''}" ng-click="changeOrder('id')">产品编号<span class="caret"></span></th>
        <th ng-class="{dropup:order===''}" ng-click="changeOrder('name')">产品各称<span class="caret"></span></th>
        <th ng-class="{dropup:order===''}" ng-click="changeOrder('price')">产品价钱<span class="caret"></span></th>
      </tr>
      </thead>
      <tbody>
      <tr ng-repeat="value in data|filter:{id:search}|orderBy:order+orderType">
        <td>{{value.id}}</td>
        <td>{{value.name}}</td>
        <td>{{value.price}}</td>
      </tr>
      </tbody>

    </table>
[b]说明:[/b]上面利用了bootstrap的caret类名来显示出三角符号,并通过给父元素加dropup使三角符号转向。 1、三角符号的转向与否由ng-class指令确定,传入表达式,当order===‘ '时,为true,则给th加上dropup类名 2、用ng-click指令绑定点击事件,实现点击就切换排序方式 2.2 搜索功能 采用angular的filter过滤器,搜索输入字段
<!--输入框采用ng-model绑定一个值-->
 搜索:<input type="text" ng-model="search">
 <!--通过filter:{id:search}实现以id为搜索内容,以search的值为搜索基准-->
 <tr ng-repeat="value in data|filter:{id:search}|orderBy:order+orderType">
        <td>{{value.id}}</td>
        <td>{{value.name}}</td>
        <td>{{value.price}}</td>
      </tr>
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;设定排序的参考类型
<table class="table">
      <thead>
      <tr>
        <th ng-class="{dropup:order===''}" ng-click="changeOrder('id')">产品编号<span class="caret"></span></th>
        <th ng-class="{dropup:order===''}" ng-click="changeOrder('name')">产品各称<span class="caret"></span></th>
        <th ng-class="{dropup:order===''}" ng-click="changeOrder('price')">产品价钱<span class="caret"></span></th>
      </tr>
      </thead>
      <tbody>
        <tr ng-repeat="value in data|filter:{id:search}|orderBy:order+orderType">
          <td>{{value.id}}</td>
          <td>{{value.name}}</td>
          <td>{{value.price}}</td>
        </tr>
      </tbody>
    </table>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部