<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="js/angular.min.js" ></script>
<body ng-app="myapp" ng-controller="myctl">
商品名<input type="text" ng-model="name" />
价格<input type="text" ng-model="price" />
数量<input type="text" ng-model="count" />
<input type="button" value="添加" ng-click="add()" />
<input type="button" value="批量删除" ng-click="pl()" /><br/>
<table border="1px" cellpadding="0px" cellspacing="0px">
<tr>
<td><input type="checkbox" ng-model="flag" ng-click="qx()"/></td>
<td>球类</td>
<td>单价</td>
<td>数量</td>
<td>总价</td>
<td>操作</td>
</tr>
<tr ng-repeat="good in goods">
<td><input type="checkbox" ng-checked="dx" ng-click="cb($index)"/></td>
<td>{{good.name}}</td>
<td>{{good.price}}</td>
<td>{{good.count}}</td>
<td>¥{{good.price*good.count}}</td>
<td><input type="button" value="删除" ng-click="dele($index)"/></td>
</tr>
</table>
<script type="text/javascript">
var mo=angular.module("myapp",[]);
mo.controller("myctl",function($scope){
//新建一个数组
$scope.goods=new Array();
$scope.add=function(){
//获取Text的值
var name=$scope.name;
var price=$scope.price;
var count=$scope.count;
//封装json添加到数组中
$scope.goods.push({"danxuan":false,"name":name,"price":price,"count":count});
}
$scope.dele=function($index){
//删除
$scope.goods.splice($index,1);
};
//全选/全不选
$scope.qx=function(){
for(var i=$scope.goods.length-1;i>=0;i--){
$scope.goods[i].danxuan=$scope.flag;
}
//每行的checkbox选择状态要改变数组的值
$scope.cb=function($index){
$scope.goods[$index].danxuan=!$scope.goods[$index].danxuan;
};
//批量删除
$scope.pl=function(){
//删除之后数组会改变所以要反着遍历
for(var i=$scope.goods.length-1;i>=0;i--){
var g = $scope.goods[i];
if(g.danxuan){
$scope.goods.splice(i,1);
}
}
//初始化checkbox的值
$scope.flag=false;
$scope.dx=false;
};
});
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="js/angular.min.js" ></script>
<body ng-app="myapp" ng-controller="myctl">
商品名<input type="text" ng-model="name" />
价格<input type="text" ng-model="price" />
数量<input type="text" ng-model="count" />
<input type="button" value="添加" ng-click="add()" />
<input type="button" value="批量删除" ng-click="pl()" /><br/>
<table border="1px" cellpadding="0px" cellspacing="0px">
<tr>
<td><input type="checkbox" ng-model="flag" ng-click="qx()"/></td>
<td>球类</td>
<td>单价</td>
<td>数量</td>
<td>总价</td>
<td>操作</td>
</tr>
<tr ng-repeat="good in goods">
<td><input type="checkbox" ng-checked="dx" ng-click="cb($index)"/></td>
<td>{{good.name}}</td>
<td>{{good.price}}</td>
<td>{{good.count}}</td>
<td>¥{{good.price*good.count}}</td>
<td><input type="button" value="删除" ng-click="dele($index)"/></td>
</tr>
</table>
<script type="text/javascript">
var mo=angular.module("myapp",[]);
mo.controller("myctl",function($scope){
//新建一个数组
$scope.goods=new Array();
$scope.add=function(){
//获取Text的值
var name=$scope.name;
var price=$scope.price;
var count=$scope.count;
//封装json添加到数组中
$scope.goods.push({"danxuan":false,"name":name,"price":price,"count":count});
}
$scope.dele=function($index){
//删除
$scope.goods.splice($index,1);
};
//全选/全不选
$scope.qx=function(){
for(var i=$scope.goods.length-1;i>=0;i--){
$scope.goods[i].danxuan=$scope.flag;
}
//通过获取ng-model的值给ng-checked复制
}
//每行的checkbox选择状态要改变数组的值
$scope.cb=function($index){
$scope.goods[$index].danxuan=!$scope.goods[$index].danxuan;
};
//批量删除
$scope.pl=function(){
//删除之后数组会改变所以要反着遍历
for(var i=$scope.goods.length-1;i>=0;i--){
var g = $scope.goods[i];
if(g.danxuan){
$scope.goods.splice(i,1);
}
}
//初始化checkbox的值
$scope.flag=false;
$scope.dx=false;
};
});
</script>
</body>
</html>