列表

来源：互联网发布：小麦淘商城知乎编辑：程序博客网时间：2024/06/05 07:20

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.js" ></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.shops = [{
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
},{
id:910,
name:"imac",
price:6600
}];

/*$scope.de=function(index){
//删除当前项
$scope.shops.splice(index,1);
}*/

$scope.de=function(name){
if(window.confirm("确定要删除"+name+"吗？")){
for(index in $scope.shops){
if(name == $scope.shops[index].name){
$scope.shops.splice(index,1);
}
}
}
}

//下拉菜单筛选价格
$scope.sel = "--请选择--";
/*$scope.haha = function(){
alert($scope.sel);
}*/
$scope.isPrice = function(price){
//判断当前商品价值是否在选中的价格范围内
var priceArr = $scope.sel.split("--");
var priceMin = priceArr[0];
var priceMax = priceArr[1];
if($scope.sel == "--请选择--"){
return true;
}else{
if(isNaN(priceMax)){
if(price>=priceMin){
return true;
}else{
return false;
}
}else{
if(price>=priceMin && price <= priceMax){
return true;
}else{
return false;
}
}
}
}

//点击列明进行排序
$scope.flag = "";
$scope.orderColumn = "id";
$scope.order = function(column){
//alert(column);
$scope.orderColumn = column;
if($scope.flag == ""){
$scope.flag = "-";
}else{
$scope.flag = "";
}
}
})
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h3>商品列表</h3>
<input type="text" placeholder="商品名称" ng-model="search"/>
产品价格:<select ng-model="sel"">
<option>--请选择--</option>
<option> 0--2000</option>
<option> 2001--3000</option>
<option> 3001--4000</option>
<option> 4001--5000</option>
<option> 5001--6000</option>
<option> 6001--无限大</option>
</select><br /><br />

<table border="1px solid blue;" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th ng-click="order('id')">产品编号</th>
<th ng-click="order('name')">产品名称</th>
<th ng-click="order('price')">产品价格</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="shop in shops | filter:{name:search} | orderBy:flag+orderColumn" ng-show="isPrice(shop.price)">
<td>{{shop.id}}</td>
<td>{{shop.name}}</td>
<td>{{shop.price}}</td>
<td width="50px"><button ng-click="de(shop.name)">删除</button></td>
</tr>
</tbody>
</table>
</center>
</body>
</html>

阅读全文

0 0