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 判断判断某个对象是Object还是一个Array
Jan 28 Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
Oct 18 Javascript
jquery无限级联下拉菜单简单实例演示
Nov 23 Javascript
浅析Node.js实现HTTP文件下载
Aug 05 Javascript
浅谈js script标签中的预解析
Dec 30 Javascript
jQuery列表检索功能实现代码
Jul 17 jQuery
利用Ionic2 + angular4实现一个地区选择组件
Jul 27 Javascript
浅谈mint-ui 填坑之路
Nov 06 Javascript
vue将后台数据时间戳转换成日期格式
Jul 31 Javascript
vue+koa2实现session、token登陆状态验证的示例
Aug 30 Javascript
Vue使用Three.js加载glTF模型的方法详解
Jun 14 Javascript
关于element的表单组件整理笔记
Feb 05 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
smarty静态实验表明,网络上是错的~呵呵
2006/11/25 PHP
编译PHP报错configure error Cannot find libmysqlclient under usr的解决方法
2014/06/27 PHP
PHP可变函数学习小结
2015/11/29 PHP
ThinkPHP中html:list标签用法分析
2016/01/09 PHP
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
2010/09/14 Javascript
学习面向对象之面向对象的基本概念:对象和其他基本要素
2010/11/30 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
2012/02/03 Javascript
js 验证密码强弱的小例子
2013/03/21 Javascript
Google 地图类型详解及示例代码
2016/08/06 Javascript
基于VUE.JS的移动端框架Mint UI的使用
2017/10/11 Javascript
JS实现网页抢购功能(触发,终止脚本)
2017/11/27 Javascript
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
angularjs实现table增加tr的方法
2018/02/27 Javascript
vue实现2048小游戏功能思路详解
2018/05/09 Javascript
layui 实现table翻页滚动条位置保持不变的例子
2019/09/05 Javascript
微信小程序实现图片压缩
2019/12/03 Javascript
vue实现打地鼠小游戏
2020/08/21 Javascript
[03:02]2014DOTA2西雅图邀请赛 让队员自己告诉你DK NAVI备战情况
2014/07/08 DOTA
[53:10]完美世界DOTA2联赛决赛日 FTD vs GXR 第二场 11.08
2020/11/11 DOTA
python pandas生成时间列表
2019/06/29 Python
在python中将list分段并保存为array类型的方法
2019/07/15 Python
Django自带的加密算法及加密模块详解
2019/12/03 Python
python实现批量修改文件名
2020/03/23 Python
详解HTML5 window.postMessage与跨域
2017/05/11 HTML / CSS
美国著名手表网站:Timepiece
2017/11/15 全球购物
伦敦剧院及景点门票:Encore Tickets
2018/07/01 全球购物
JD Sports芬兰:英国领先的运动鞋和运动服饰零售商
2018/11/16 全球购物
eBay瑞士购物网站:eBay.ch
2018/12/24 全球购物
家长会学生演讲稿
2014/04/26 职场文书
2014年党的群众路线教育实践活动整改措施(个人版)
2014/09/25 职场文书
给上级领导的感谢信
2015/01/22 职场文书
颐和园导游词
2015/01/30 职场文书
教师党员个人自我评价
2015/03/04 职场文书
2015年推广普通话演讲稿
2015/03/20 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书
2019年教师节活动策划方案
2019/09/09 职场文书