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>
<!--输入框采用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>
$scope.order=''; //当order为‘'时正序
$scope.changeOrder=function(type){ //传入属性名,以此为基准排序
$scope.orderType=type;
if($scope.order===''){
$scope.order='-'; //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>
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码(独立后台)...苏ICP备2024110244号-2 苏公网安备32050702011978号 增值电信业务经营许可证编号:苏B2-20251499 | Copyright 2018 - 2025 源码网商城 (www.ymwmall.com) 版权所有