<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第三周周考</title>
<script type="text/javascript" src="angular.js" ></script>
<script src="jquery-3.2.1.js"></script>
<script>
var app=angular.module("myApp",[]);
app.controller("myController",function($scope){
$scope.user=[
{checked:false,id:"1324",name:"ipad",price:"3400.00",num:"10",item:"0"},
{checked:false,id:"4567",name:"aphone",price:"6400.00",num:"100",item:"1"},
{checked:false,id:"3546",name:"mypad",price:"4400.00",num:"20",item:"2"},
{checked:false,id:"1987",name:"zpad",price:"8400.00",num:"120",item:"3"}
]
$scope.nc=function(index){
if($scope.user[index].checked==false){
alert("请选中后删除");
}else{
if(confirm("确认删除")){
$scope.user.splice(index,1)
}
}
}
$scope.qs=function(){
for(var i=0;i<$scope.user.length;i++){
if($scope.user[i].checked==false){
alert("请选中后删除");
}else{
if(confirm("确认全删")){
$scope.user=[];
}
}
}
}
$scope.selectAllClick=function(sa){
for(var i=0;i<$scope.user.length;i++){
$scope.user[i].checked=sa;
}
}
$scope.echoChange=function(ck,id){
if(ck==false){
$scope.user[id].checked=true;
}else{
$scope.user[id].checked=false;
}
}
$scope.togg=function(tit){
$scope.title=tit;
$scope.desc = !$scope.desc;
}
})
</script>
<style>
.d{
width:100%;
height: 50px;
background: gainsboro;
}
td{
background: white;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myController">
<div class="d">
<input type="text"style="float: left;line-height: 30px" ng-model="serch">
<button style="float: right;line-height: 30px" ng-click="qs()">批量删除</button>
</div>
<table style="width: 100%; height: 400px; background: gainsboro;margin-top: 40px" cellspacing="1px">
<tr>
<td><input type="checkbox" ng-model="selectAll" ng-click="selectAllClick(selectAll)"></td>
<td ng-click="togg(‘id‘)">商品编号</td>
<td ng-click="togg(‘name‘)">商品名称</td>
<td ng-click="togg(‘price‘)">商品价格</td>
<td ng-click="togg(‘num‘)">商品库存</td>
<td>数据操作</td>
</tr>
<tr ng-repeat="u in user|filter:serch|orderBy:title:desc">
<td><input type="checkbox" ng-checked="u.checked"ng-click="echoChange(u.checked,$index)"></td>
<td>{{u.id}}</td>
<td>{{u.name}}</td>
<td>￥：{{u.price}}</td>
<td>{{u.num}}</td>
<td><button ng-click="nc($index)">删除</button></td>
</tr>
</table>
</body>
</html>
HTML angular购物车
原文地址：http://www.cnblogs.com/qq402792989/p/7673925.html