Angular排序删除功能

来源：互联网发布：武汉软件测试工资编辑：程序博客网时间：2024/06/08 11:06

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>moni</title>
<script src="../Angularjs/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("myCtrl",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("删除全部");
}
$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);
}
}
}
}
}
})
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<table cellpadding="10" cellspacing="0" border="1">
<tr style="background-color:#f00;">
<td colspan="4"><input type="text" ng-model="ss" placeholder="产品名称">
<button ng-click="removeAll()">查询/删除全部</button>
</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￥'}}
<button ng-click="deletes(x.name )">删除</button>
</td>
</tr>
</table>
</body>
</html>

阅读全文

0 0