angular实现商品筛选功能

网友投稿 233 2023-06-16


angular实现商品筛选功能

一、demo功能分析

1、通过service()创建数据并遍历渲染到页面

2、根据输入框的输入值进行字段查询

3、点击各列实现排序功能。

二、实现

1.1 数据定义与渲染

angular更偏向于是一个MVVMhttp://模式的框架,所以它的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='';

}

}

})

数据渲染部分:

产品编号

产品各称

产品价钱

说明:上面利用了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()方http://法用于实现点击就切换排序的功能

$scope.order=''; //当order为‘'时正序

$scope.changeOrder=function(type){ //传入属性名,以此为基准排序

$scope.orderType=type;

if($scope.order===''){

$scope.order='-'; //order为'-'时,反序

}else{

$scope.order='';

}

}

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

产品编号

产品各称

产品价钱


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:JAVA中的基本数据类型
下一篇:Java解决通信过程的中文乱码的问题
相关文章

 发表评论

暂时没有评论,来抢沙发吧~