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='';
}
}
})
数据渲染部分：
<tableclass="table">
<thead>
<tr>
<thng-class="{dropup:order===''}"ng-click="changeOrder('id')">产品编号<spanclass="caret"></span></th>
<thng-class="{dropup:order===''}"ng-click="changeOrder('name')">产品各称<spanclass="caret"></span></th>
<thng-class="{dropup:order===''}"ng-click="changeOrder('price')">产品价钱<spanclass="caret"></span></th>
</tr>
</thead>
<tbody>
<trng-repeat="valueindata|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绑定一个值-->
搜索：<inputtype="text"ng-model="search">
<!--通过filter:{id:search}实现以id为搜索内容，以search的值为搜索基准-->
<trng-repeat="valueindata|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;设定排序的参考类型
<tableclass="table">
<thead>
<tr>
<thng-class="{dropup:order===''}"ng-click="changeOrder('id')">产品编号<spanclass="caret"></span></th>
<thng-class="{dropup:order===''}"ng-click="changeOrder('name')">产品各称<spanclass="caret"></span></th>
<thng-class="{dropup:order===''}"ng-click="changeOrder('price')">产品价钱<spanclass="caret"></span></th>
</tr>
</thead>
<tbody>
<trng-repeat="valueindata|filter:{id:search}|orderBy:order+orderType">
<td>{{value.id}}</td>
<td>{{value.name}}</td>
<td>{{value.price}}</td>
</tr>
</tbody>
</table>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。