<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title></title>
<style>
/*鼠标变小手*/
button{cursor: pointer;}
table tr:nth-child(2n){
background-color: bisque;
}
#ss{width: 40px; text-align: center;}
table{border: 2px solid red; width: 1000px;
text-align: center;
}
tr,td{border: 1px solid black; }
</style>
<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
<script type="text/javascript" src="js/angular.min.js" ></script>
</head>
<body ng-controller="myCtrl">
<input type="text" placeholder="请输入关键词" ng-model="chaxun" />
<input type="button" value="查询" ng-click="cxun()" />
<input type="button" value="添加" ng-click="tianjia()" />
<button ng-click="delSelect()" >批量删除</button>
排序：<select ng-model="selorder">
<option value="prices">数量正序</option>
<option value="-prices">数量倒序</option>
</select>
<table cellspacing="0px">
<tr>
<td><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()" /></td>
<td>产品编号</td>
<td>产品名称</td>
<td>购买数量</td>
<td>产品单价</td>
<td>产品总价</td>
<td>操作</td>
</tr>
<tr ng-repeat="x in datas | filter:chaxun | orderBy:selorder ">
<td><input type="checkbox" ng-model="x.state"/></td>
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td>
<button ng-click="jian($index)">-</button>
<input id="ss" type="text" ng-model="x.nums" />
<button ng-click="jia($index)">+</button>
</td>
<td>{{x.prices}}</td>
<td>{{x.prices*x.nums}}</td>
<td>
<button ng-click="remove($index)">删除</button>
<button ng-click="xiugai($index)">修改</button>
</td>
</tr>
</table>
<div>
<h3>总价：</h3><h3>{{zongjia()}}</h3>
<h3>总数：</h3><h3>{{zongshu()}}</h3>
<button ng-click="removeAll()">清空购物车</button>
</div>
<!--添加页面-->
<fieldset style="margin-top: 20px;" ng-show="sos" >
<legend>新增商品：</legend>
产品编号
<input type="text" ng-model="id_1" required/>
<span id="sp1"></span>
<br/> 产品名称
<input type="text" ng-model="name_1" required/>
<span id="sp2"></span>
<br/> 购买数量
<input type="number" ng-model="nums_1" required/>
<span id="sp3"></span>
<br/> 产品单价
<input type="text" ng-model="prices_1" required/>
<span id="sp4"></span>
<br/>
<input type="button" value="保存" ng-click="bz()" />
</fieldset>
<!--修改页面-->
<fieldset style="margin-top: 20px;" ng-show="lol">
<legend>修改商品信息：</legend>
产品编号
<input type="text" ng-model="id_2" required/>
<span id="sp1_1"></span>
<br/> 产品名称
<input type="text" ng-model="name_2" required/>
<span id="sp2_1"></span>
<br/> 购买数量
<input type="number" ng-model="nums_2" required/>
<span id="sp3_1"></span>
<br/> 产品单价
<input type="text" ng-model="prices_2" required/>
<span id="sp4_1"></span>
<br/>
<input type="button" value="确认修改" ng-click="bz2()" />
</fieldset>
<script>
var idx = -1 ;
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
// 自定义数据
$scope.datas=[{
id:1001,
name:"xiaomi6",
nums:1,
prices:3888,
state: false
},{
id:1002,
name:"iphone7",
nums:1,
prices:5888,
state: false
},{
id:1003,
name:"htc7",
nums:1,
prices:4888,
state: false
},{
id:1004,
name:"oppo5",
nums:1,
prices:3888,
state: false
},{
id:1005,
name:"vivo7",
nums:1,
prices:4300,
state: false
}
];
$scope.jian = function(index){
if($scope.datas[index].nums>1){
$scope.datas[index].nums--;
}else{
alert("数量不能为负数");
}
}
$scope.jia = function(index){
$scope.datas[index].nums++;
}
// 全选和反选
$scope.selectAllFun = function(){
if($scope.selectAll){
for (var x = 0 ; x<$scope.datas.length; x++) {
$scope.datas[x].state = true;
}
}else{
for (var x = 0 ; x<$scope.datas.length; x++) {
$scope.datas[x].state = false;
}
}
}
// 批量删除
$scope.delSelect = function(){
var arrs = [];
for (var x = 0 ; x<$scope.datas.length; x++) {
if($scope.datas[x].state){
arrs.push($scope.datas[x].name);
}
}
if(arrs.length<=0){
alert("请选择要删除的数据");
}else{
for (var x = 0 ; x<arrs.length; x++) {
for (var xx = 0; xx<$scope.datas.length; xx++) {
if(arrs[x]==$scope.datas[xx].name){
$scope.datas.splice(xx,1);
}
}
}
}
}
// 删除
$scope.remove = function(index){
if(confirm("删除吗？")){
$scope.datas.splice(index,1);
}
}
// 总价
$scope.zongjia = function(){
var zprice = 0;
for (var x = 0 ; x <$scope.datas.length; x++) {
zprice+=$scope.datas[x].nums*$scope.datas[x].prices;
}
return zprice;
}
// 总数
$scope.zongshu = function(){
var nums = 0;
for (var x = 0 ; x <$scope.datas.length; x++) {
nums+=$scope.datas[x].nums;
}
return nums;
}
// 清空
$scope.removeAll = function(){
$scope.datas=[];
}
// 添加 显示添加表格
$scope.tianjia = function(){
$scope.sos = true;
}
// 修改 显示修改表格
$scope.xiugai = function(index){
$scope.lol = true;
idx = index;
$scope.id_2 = $scope.datas[index].id;
$scope.name_2 = $scope.datas[index].name;
$scope.nums_2 = $scope.datas[index].nums;
$scope.prices_2 = $scope.datas[index].prices;
}
// 查询
$scope.cxun = function(){
var zz = [];
var cc = $scope.chaxun;
for (var i = 0 ; i<$scope.datas.length; i++) {
if( $scope.datas[i].name.indexOf(cc)!=-1){
zz.push($scope.datas[i]);
}
}
$scope.datas=zz;
}
// 添加
$scope.bz = function(){
var i = $scope.id_1;
var n = $scope.name_1;
var u = $scope.nums_1;
var p = $scope.prices_1;
var flag = true;
if(i==null||i==""){
$("#sp1").html("不能为空");
flag=false;
}else{
$("#sp1").html("");
flag=true;
}
if(n==null||n==""){
$("#sp2").html("不能为空");
flag=false;
}else{
$("#sp2").html("");
flag=true;
}
if(u==null||u==""){
$("#sp3").html("不能为空");
flag=false;
}else{
$("#sp3").html("");
flag=true;
}
if(p==null||p==""){
$("#sp4").html("不能为空");
flag=false;
}else{
$("#sp4").html("");
flag=true;
}
if(flag){
$scope.datas.push({
id:$scope.id_1,
name:$scope.name_1,
nums:$scope.nums_1,
prices:$scope.prices_1
});
$scope.id_1="";
$scope.name_1="";
$scope.nums_1="";
$scope.prices_1="";
$scope.sos = false;
}
};
// 修改
$scope.bz2 = function(){
$scope.datas[idx].id == $scope.id_2
$scope.datas[idx].name = $scope.name_2;
$scope.datas[idx].nums = $scope.nums_2;
$scope.datas[idx].prices = $scope.prices_2;
$scope.lol = false;
}
});
</script>
</body>
</html>反选：
//全选/反选多选框的点击事件
$scope.cb = function(){
if($scope.ck){//判断当点击全选框时
for(var i=0;i<$scope.datas.length;i++){
if($scope.datas[i].state){//当其他复选框为选中状态时
$scope.datas[i].state = false;//改为不选中状态
}else{//当其他复选框为不选中状态时
$scope.datas[i].state = true;//改为选中状态
}
}
}else{//判断当不点击全选框时
for(var i=0;i<$scope.datas.length;i++){
if($scope.datas[i].state){//当其他复选框为选中状态时
$scope.datas[i].state = false;//改为不选中状态
}else{//当其他复选框为不选中状态时
$scope.datas[i].state = true;//改为选中状态
}
}
}
}效果：
