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 相关文章推荐
JQUBar 基于JQUERY的柱状图插件
Nov 23 Javascript
基于Jquery与WebMethod投票功能实现代码
Jan 19 Javascript
浅析JavaScript原型继承的陷阱
Dec 03 Javascript
解析Javascript中难以理解的11个问题
Dec 09 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
Sep 02 Javascript
javascript封装 Cookie 应用接口
Aug 07 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
Nov 02 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
Dec 13 Javascript
简单实现jQuery手风琴效果
Aug 18 jQuery
微信小程序自定义tab实现多层tab嵌套功能
Jun 15 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
Jun 27 Javascript
vue 实现把路由单独分离出来
Aug 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
PHP 程序员的调试技术小结
2009/11/15 PHP
PHP zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
探讨PHP中OO之静态关键字以及类常量的详解
2013/06/07 PHP
PHP大小写问题:函数名和类名不区分,变量名区分
2013/06/17 PHP
php获得url参数中具有&amp;的值的方法
2014/03/05 PHP
php sybase_fetch_array使用方法
2014/04/15 PHP
PHP读取RSS(Feed)简单实例
2014/06/12 PHP
PHP基于socket实现的简单客户端和服务端通讯功能示例
2017/07/10 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
用JQuery 实现的自定义对话框
2007/03/24 Javascript
JavaScript实现页面滚动图片加载(仿lazyload效果)
2011/07/22 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
2012/05/03 Javascript
微信分享的标题、缩略图、连接及描述设置方法
2014/10/14 Javascript
分享10个原生JavaScript技巧
2015/04/20 Javascript
Bootstrap 模态框实例插件案例分析
2016/12/28 Javascript
JS闭包用法实例分析
2017/03/27 Javascript
angular 基于ng-messages的表单验证实例
2017/05/04 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
nodejs(officegen)+vue(axios)在客户端导出word文档的方法
2018/07/31 NodeJs
浅析Proxy可以优化vue的数据监听机制问题及实现思路
2018/11/29 Javascript
Element UI框架中巧用树选择器的实现
2018/12/12 Javascript
vue实现微信二次分享以及自定义分享的示例
2019/03/20 Javascript
express异步函数异常捕获示例详解
2020/11/30 Javascript
[07:43]《辉夜杯》公开赛晋级外卡赛战队—TRG训练生活探秘
2015/12/11 DOTA
python发送邮件的实例代码(支持html、图片、附件)
2013/03/04 Python
简单的Python2.7编程初学经验总结
2015/04/01 Python
Python使用gluon/mxnet模块实现的mnist手写数字识别功能完整示例
2019/12/18 Python
Python基于smtplib模块发送邮件代码实例
2020/05/29 Python
python 如何调用远程接口
2020/09/11 Python
JD Sports比利时官网:英国领先的运动鞋和运动服饰零售商
2018/10/10 全球购物
院药学专业个人求职信
2013/09/21 职场文书
校本教研活动总结
2014/07/01 职场文书
乡镇干部个人对照检查材料(群众路线)
2014/09/26 职场文书
英文升职感谢信
2015/01/23 职场文书
百年孤独读书笔记
2015/06/29 职场文书
MySQL 分组查询的优化方法
2021/05/12 MySQL