angular实现商品筛选功能


Posted in Javascript onFebruary 01, 2017

一、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='';
    }
  }
})

数据渲染部分:

<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>

说明:上面利用了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript模拟实现C# String.format函数功能代码
Nov 25 Javascript
javascript实现随机读取数组的方法
Aug 03 Javascript
探寻JavaScript中this指针指向
Apr 23 Javascript
jQuery animate easing使用方法图文详解
Jun 17 Javascript
Bootstrap下拉菜单效果实例代码分享
Jun 30 Javascript
浅析JS中对函数function的理解(基础篇)
Oct 14 Javascript
微信小程序实战之上拉(分页加载)效果(2)
Apr 17 Javascript
JavaScript 中Date对象的格式化代码方法汇总
Sep 06 Javascript
javascript和php使用ajax通信传递JSON的实例
Aug 21 Javascript
bootstrap与pagehelper实现分页效果
Dec 29 Javascript
学习RxJS之JavaScript框架Cycle.js
Jun 17 Javascript
JS动态图片的实现方法完整示例
Jan 13 Javascript
Bootstarp基本模版学习教程
Feb 01 #Javascript
angular实现表单验证及提交功能
Feb 01 #Javascript
Javascript基础回顾之(三) js面向对象
Jan 31 #Javascript
Javascript基础回顾之(二) js作用域
Jan 31 #Javascript
Javascript基础回顾之(一) 类型
Jan 31 #Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
Jan 30 #Javascript
AngularJS报错$apply already in progress的解决方法分析
Jan 30 #Javascript
You might like
点评山进PR-D3L三波段收音机
2021/03/02 无线电
检查url链接是否已经有参数的php代码 添加 ? 或 &amp;
2010/02/09 PHP
php递归创建和删除文件夹的代码小结
2012/04/13 PHP
php判断字符串在另一个字符串位置的方法
2014/02/27 PHP
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
2014/06/23 PHP
浅谈php(codeigniter)安全性注意事项
2017/04/06 PHP
PHP二维数组分页2种实现方法解析
2020/07/09 PHP
有关于JS构造函数的重载和工厂方法
2013/04/07 Javascript
js实现通用的微信分享组件示例
2014/03/10 Javascript
js实现DOM走马灯特效的方法
2015/01/21 Javascript
javascript RegExp 使用说明
2016/05/21 Javascript
基于zepto.js简单实现上传图片
2016/06/21 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
2016/12/08 Javascript
微信禁止下拉查看URL的处理方法
2017/09/28 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
2018/03/13 Javascript
js中对象和面向对象与Json介绍
2019/01/21 Javascript
angular多语言配置详解
2019/05/16 Javascript
在Vuex中Mutations修改状态操作
2020/07/24 Javascript
[58:21]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第二场
2018/04/04 DOTA
[24:42]VP vs TNC Supermajor小组赛B组 BO3 第三场 6.2
2018/06/03 DOTA
在Linux系统上安装Python的Scrapy框架的教程
2015/06/11 Python
Opencv+Python实现图像运动模糊和高斯模糊的示例
2019/04/11 Python
python psutil模块使用方法解析
2019/08/01 Python
浅谈Python3中print函数的换行
2020/08/05 Python
Python实现加密的RAR文件解压的方法(密码已知)
2020/09/11 Python
python爬虫中PhantomJS加载页面的实例方法
2020/11/12 Python
python 装饰器重要在哪
2021/02/14 Python
全球领先的在线cosplay服装商店:RoleCosplay
2020/01/18 全球购物
电信专业毕业生推荐信
2013/11/18 职场文书
社区学习雷锋活动总结
2014/04/25 职场文书
大二学生自我检讨书
2014/10/23 职场文书
单位证明范文
2015/06/18 职场文书
立秋之描写立秋的作文(五年级)
2019/08/08 职场文书
各种货币符号快捷输入
2022/02/17 杂记
mysql的Buffer Pool存储及原理
2022/04/02 MySQL
排查并解决MySQL生产库内存使用率高的报警
2022/04/11 MySQL