删除,排序,查询
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>week3code</title>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript">
//定义一个数组
var user=[
{id:80,name:"iphone",price:54000},
{id:1200,name:"ipad mini",price:24000},
{id:500,name:"ipad air",price:23400},
{id:29,name:"ipadd",price:14000},
{id:29,name:"ipads",price:14000},
{id:910,name:"imac",price:15400}
];
var app=angular.module("myapp",[]);
//绑定控制器
app.controller("myctr",function($scope){
$scope.users=user;
$scope.order1='name';//排序字段
$scope.order2='-';//为空时正序 为负号时倒序
$scope.dian=function(dians){
//点击列标题排序事件
$scope.order1=dians;
if ($scope.order2=="-") {
$scope.order2="";
} else{
$scope.order2='-';
}
};
//删除全部
$scope.removeAll=function(){
$scope.users=[];
alert("删除全部");
}
//方式1,按下标删除产品,升降序后,删除容易错乱,因为下标在变
/*$scope.deletes=function(index){
$scope.users.splice(index,1);*/
//方式2,按name属性删除
$scope.deletes=function(name){
if(name!=""){
if(confirm("是否删除"+name+"商品")){
var p;
for(index in $scope.users){
p=$scope.users[index];
if(p.name==name){
$scope.users.splice(index,1);
}
}
}
}
alert("是否删除商品");
if($scope.users.length<1){
alert("删除全部");
};
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="myctr">
<table cellpadding="10" cellspacing="0" border="1">
<!--
导航
-->
<tr style="background-color:#DCDCDC;">
<td colspan="4"><input type="text" ng-model="ss" placeholder="产品名称">
<button ng-click="removeAll()">查询/删除全部</button>
产品价格:
<select>
<option>1000-20000</option>
</select>
</td>
</tr>
<tr>
<th ng-click="dian('id')">产品编号</th>
<th ng-click="dian('name')">产品名称</th>
<th ng-click="dian('price')">产品价格</th>
</tr>
<tr ng-repeat="x in users |filter:{'name':ss} |orderBy:(order2+order1)">
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td>{{x.price|currency:'RMB¥'}}
<!--
方式1 按下标$index删除
<button ng-click="deletes($index)">删除</button>-->
<!--
方式2,按name删除
-->
<button ng-click="deletes(x.name)">删除</button>
</td>
</tr>
</table>
</body>
</html>