您的位置：首页 > Web前端 > AngularJS

AngularJS实现购物车模糊查询,价格区间查找,根据名字删除,点击排序

2017-11-17 20:10 726 查看

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8" />
<title>购物车</title>
<script type="text/javascript" src="angular/angular.js" ></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope,$rootScope){
$scope.list = [{
id:80,
name:"iphone",
price:5400
},{
id:1200,
name:"ipad mini",
price:2200
},{
id:500,
name:"ipad air",
price:2340
},{
id:29,
name:"ipad",
price:1420
}];
$scope.del=function(name){
/*$scope.list.splice(index,1);*/
for(index in $scope.list){
if($scope.list[index].name==name){
$scope.list.splice(index,1);
}
}
};
$scope.show = function(){
if($scope.list.length>0){
return true;
}else{
return false;
}
};
//价格区间的功能
$scope.ss="请选择";

$scope.money=function (item) {

var arr=$scope.ss.split("-");

var min=arr[0];

var max=arr[1];

if(item<min||item>max){

return false;

}else{

return true;

}

}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl" align="center">
<input type="text" placeholder="产品名称" ng-model="query" />
产品价格:<select ng-model="ss">
<option>请选择</option>
<option selected="selected">1000-2000</option>
<option>2000-3000</option>
<option>3000-4000</option></select><br />
<table ng-show="show()" style="margin-top: 50px;" align="center" cellpadding="5" cellspacing="0" border="1px solid #000">
<thead>
<tr>
<th ng-click="desc=!desc;col='id'">产品编号</th>
<th ng-click="desc=!desc;col='name'">产品名称</th>
<th ng-click="desc=!desc;col='price'">产品价格</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="l in list | filter:{'name':query} | orderBy:col:desc; " ng-if="money(l.price)">
<td>{{l.id}}</td>
<td>{{l.name}}</td>
<td>{{l.price | currency:"(RMB)"}}</td>
<td><button ng-click="del(l.name)">删除</button></td>
</tr>
</tbody>
</table>
<p ng-if="!show()">购物车为空</p>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航