angular怎么实现商品筛选功能-创新互联
这篇文章主要为大家展示了“angular怎么实现商品筛选功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“angular怎么实现商品筛选功能”这篇文章吧。
专注于为中小企业提供成都网站建设、网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业渝北免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了数千家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。一、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=''; } } })
数据渲染部分:
产品编号 | 产品各称 | 产品价钱 |
---|---|---|
{{value.id}} | {{value.name}} | {{value.price}} |
说明:上面利用了bootstrap的caret类名来显示出三角符号,并通过给父元素加dropup使三角符号转向。
1、三角符号的转向与否由ng-class指令确定,传入表达式,当order===‘ '时,为true,则给th加上dropup类名
2、用ng-click指令绑定点击事件,实现点击就切换排序方式
2.2 搜索功能
采用angular的filter过滤器,搜索输入字段
搜索:{{value.id}} {{value.name}} {{value.price}}
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;设定排序的参考类型
产品编号 | 产品各称 | 产品价钱 |
---|---|---|
{{value.id}} | {{value.name}} | {{value.price}} |
以上是“angular怎么实现商品筛选功能”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联网站建设公司行业资讯频道!
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网页名称:angular怎么实现商品筛选功能-创新互联
标题来源:http://scyanting.com/article/eossp.html