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 相关文章推荐
用jquery生成二级菜单的实例代码
Jun 24 Javascript
JQuery记住用户名和密码的具体实现
Apr 04 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
Oct 14 Javascript
jQuery实现移动 和 渐变特效的点击事件
Feb 26 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
Apr 21 Javascript
js实现的万能flv网页播放器代码
Apr 30 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
May 27 Javascript
jqgrid实现简单的单行编辑功能
Sep 30 Javascript
element ui 对话框el-dialog关闭事件详解
Feb 26 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
Dec 25 Javascript
Vue之封装公用变量以及实现方式
Jul 31 Javascript
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
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 FLEA中二叉树数组的遍历输出
2012/09/26 PHP
php中simplexml_load_string使用实例分享
2014/02/13 PHP
Thinkphp中import的几个用法详细介绍
2014/07/02 PHP
PHP结合Redis+MySQL实现冷热数据交换应用案例详解
2019/07/09 PHP
为你的网站增加亮点的9款jQuery插件推荐
2011/05/03 Javascript
JS模板实现方法
2013/04/03 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
2014/04/08 Javascript
JavaScript 里的类数组对象
2015/04/08 Javascript
jQuery实现径向动画菜单效果
2015/07/17 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
2015/08/10 Javascript
javascript实现下雪效果【实例代码】
2016/05/03 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
原生js实现移动端触摸轮播的示例代码
2017/12/22 Javascript
Vue动态修改网页标题的方法及遇到问题
2019/06/09 Javascript
Python中文编码那些事
2014/06/25 Python
Python科学计算之Pandas详解
2017/01/15 Python
OpenCV实现人脸识别
2017/04/07 Python
Python 实现网页自动截图的示例讲解
2018/05/17 Python
python 获取当天凌晨零点的时间戳方法
2018/05/22 Python
Python如何使用OS模块调用cmd
2020/02/27 Python
Python PyQt5运行程序把输出信息展示到GUI图形界面上
2020/04/27 Python
Python中读取文件名中的数字的实例详解
2020/12/25 Python
浅谈HTML5中dialog元素尝鲜
2018/10/15 HTML / CSS
英国乐购杂货:Tesco Groceries
2018/11/29 全球购物
Nip + Fab官网:英国美容品牌
2019/08/26 全球购物
编写函数,将一个3*3矩阵转置
2013/10/09 面试题
个人求职简历的自我评价范文
2013/10/09 职场文书
英语教研活动总结
2014/07/02 职场文书
化学专业大学生职业生涯规划范文
2014/09/13 职场文书
支部书记四风问题对照检查材料
2014/10/04 职场文书
公诉意见书范文
2015/06/05 职场文书
2015年科学教研组工作总结
2015/07/22 职场文书
普希金的诗歌赏析(3首)
2019/08/20 职场文书
关于CSS自定义属性与前端页面的主题切换问题
2022/03/21 HTML / CSS
maven 解包依赖项中的文件的解决方法
2022/07/15 Java/Android
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
2022/08/05 Vue.js