angular实现商品筛选功能

JavaScript 2019-01-07

一、demo功能分析

1、通过service()创建数据并遍历渲染到页面 2、根据输入框的输入值进行字段查询 3、点击各列实现排序功能。

二、实现

1.1 数据定义与渲染

angular更偏向于是一个MVVM模式的框架，所以它的controller很薄，里面的业务逻辑也是少的，因此应该养成把逻辑写在service或者Factory等angular提供的可以自定义服务的方法中。此次demo通过angular的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&gt;

说明：上面利用了bootstrap的caret类名来显示出三角符号，并通过给父元素加dropup使三角符号转向。 1、三角符号的转向与否由ng-class指令确定，传入表达式，当order===‘ '时，为true，则给th加上dropup类名 2、用ng-click指令绑定点击事件，实现点击就切换排序方式

2.2 搜索功能

采用angular的filter过滤器，搜索输入字段

搜索：

2.3 排序功能

1、定义order属性用于设置正序还是反序 2、定义orderType属性用于设置参考排序的值 3、定义changeOrder（）方法用于实现点击就切换排序的功能

属性名，以此为基准排序 $scope.orderType=type; if($scope.order===''){ $scope.order='-'; //order为'-'时，反序 }else{ $scope.order=''; } }

页面中：changeOrder()函数传入“类型”作为参数，并在函数内部通过\ $scope.orderType=type;设定排序的参考类型

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

angular商品筛选 angular商品筛选功能 angular筛选功能

Javascript中的事件冒泡与捕获

事件冒泡和事件捕获起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支持第三个参数...

搞懂js中小数运算精度问题原因及解决办法