前端开发

最新推荐文章于 2024-03-20 00:55:27 发布

鱼宝宝2017

最新推荐文章于 2024-03-20 00:55:27 发布

阅读量301

点赞数

本文链接：https://blog.csdn.net/Mr_Wangxj/article/details/79441975

版权

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
输入产品名称:<input type="text" id="chaName" /><input type="button" value="查询" ng-click="cha()" /> 数量排序:
<select id="pai" ng-options="x for x in orders" ng-model="selected" ng-init="selected=orders[0]" ng-change="change()">
</select>
<input type="button" value="批量删除" ng-click="deleSome()" />
<table border="1px" cellpadding="0" cellspacing="0">
<tr>
<td><input type="checkbox" id="quan" ng-click="quan()" /></td>
<td>产品编号</td>
<td>产品名称</td>
<td>购买数量</td>
<td>产品单价</td>
<td>产品总价</td>
<td>操作</td>
</tr>
<tr ng-repeat="msg in msgs">
<td><input type="checkbox" class="myCb" /></td>
<td>{{msg.bh}}</td>
<td>{{msg.mc}}</td>
<td><button ng-click="jian($index)">-</button>
<input type="text" ng-model="msg.count" />
<button ng-click="jia($index)">+</button>
<td>{{msg.dj}}</td>
<td>{{msg.count*msg.dj}}</td>
<td><input type="button" value="移除" ng-click="dele($index)" /></td>
<td><input type="button" value="修改" ng-click="update($index)" /></td>
</tr>
</table>
总价:<span ng-init="0">{{all()}}</span>购买数量:<span>{{allnum()}}</span><input type="button" value="清空购物车" ng-click="delAll()" /><br />
<form>
商品编号: <input type="text" name="bht1" id="bht1" /><br /> 产品名称:
<input type="text" name="mct1" id="mct1" /><br /> 购买数量:
<input type="text" name="slt1" id="slt1" /><br /> 产品单价:
<input type="text" name="djt1" id="djt1" /><br />
<input type="button" value="保存" ng-click="save()" />
</form>
<form style="border: solid black; width: 300px;" ng-show="updateShow">
商品编号:<input type="text" ng-model="updateId" /><br /> 商品名称:
<input type="text" ng-model="updateName" /><br /> 商品数量:
<input type="num" ng-model="updateNum" /><br /> 商品编号:
<input type="text" ng-model="updatePrice" /><br />
<button type="button" value="提交" ng-click="updateSub()">提交</button>

</form>
<script>
var m = angular.module("myApp", []);
m.controller("myCtrl", function($scope) {

$scope.msgs = [{
"bh": "7888",
"mc": "iPhone 8",
"count": "1",
"dj": "7888",
"zj": "7888"
}, {
"bh": "8888",
"mc": "iPhone 9",
"count": "1",
"dj": "8888",
"zj": "8888"
}, {
"bh": "3888",
"mc": "iPhone 2s",
"count": "1",
"dj": "3888",
"zj": "3888"
}, {
"bh": "9999",
"mc": "iPhone 7p+",
"count": "1",
"dj": "9999",
"zj": "9999"
}];
$scope.jian = function(index) {
if ($scope.msgs[index].count > 0) {
$scope.msgs[index].count--;
} else {
alert("已没有商品");

}

}
$scope.jia = function(index) {
$scope.msgs[index].count++;
}
$scope.dele = function($index) {
var c = confirm("确认删除吗?");
if (c == true) {
$scope.msgs.splice($index, 1);
}
};
$scope.delAll = function($index) {
$scope.msgs = [];
};
$scope.all = function() {
var all = 0;
for (i = 0; i < $scope.msgs.length; i++) {
all += $scope.msgs[i].dj * $scope.msgs[i].count;
}
return all;
}
$scope.allnum = function() {
var allnum = 0;
for (i = 0; i < $scope.msgs.length; i++) {
allnum += $scope.msgs[i].count * 1;
}
return allnum;

}

$scope.save = function() {
var name12 = $("#bht1").val();
var age = $("#mct1").val();
var pinyin = $("#slt1").val();
var zhiwei = $("#djt1").val();

var pe = {
"bh": name12,
"mc": age,
"count": pinyin,
"dj": zhiwei,
"zj": pinyin * zhiwei
};
$scope.msgs.push(pe);
}
$scope.cha = function() {
var chaNam = $("#chaName").val();
if (chaNam == "") {
alert("请输入姓名!");
}
var newMsgs = [];
//判断是否含有此数据
for (i = 0; i < $scope.msgs.length; i++) {
var p = $scope.msgs[i];
if (p.mc == chaNam) {
newMsgs.push(p);
}
}
if (newMsgs.length == 0) {
alert("没有匹配到相关内容!");
return;
}
$scope.msgs = newMsgs;
}
//初始化下拉
$scope.orders = ["", "按价格正序排列", "按价格倒序排列"];
$scope.change = function() {
var pai = $("#pai").val();
if (pai == "string:按价格正序排列") {
$scope.msgs.sort(function(a, b) {
if (a.dj > b.dj) {
return 1;
} else if (a.dj < b.dj) {
return -1;
}
return 0;
})

} else {
$scope.msgs.sort(function(a, b) {
if (a.dj > b.dj) {
return -1;
} else if (a.dj < b.dj) {
return 1;
}
return 0;
})
}
}

$scope.deleSome = function() {
var b = confirm("是否确认删除？");
if (b == true) {
var cbs = $("input[type=checkbox][class=myCb]:checked");
}
for (i = 0; i < cbs.length; i++) {
var cb = cbs[i];
var tr = cb.parentNode.parentNode;
tr.remove();
$scope.msgs.splice(i, 1);
}
}

var flag = false;
$scope.quan = function() {
var cbs = $("input[type=checkbox]");
if (flag == false) {
for (i = 0; i < cbs.length; i++) {
var cb = cbs[i];
cb.checked = true;
}
flag = true;
} else {
for (i = 0; i < cbs.length; i++) {
var cb = cbs[i];
cb.checked = false;
}
flag = false;
}
}

$scope.updateShow = false;
var updateId = "";
var updateName = "";
var updateNum = "";
var updatePrice = "";
$scope.update = function(index) {
$scope.updateShow = true;

$scope.updateId = $scope.msgs[index].bh;
$scope.updateName = $scope.msgs[index].mc;
$scope.updateNum = $scope.msgs[index].count;
$scope.updatePrice = $scope.msgs[index].dj;
}

//提交的按钮
$scope.updateSub = function(){

/*if(){}*/

//进行id的判断，如果id相等的情况下，我就进行删除的操作

for (index in $scope.msgs) {
if($scope.updateId==$scope.msgs[index].bh){ //如果相等的情况下，进行数据的修改

$scope.msgs[index].name=$scope.updateName;

$scope.msgs[index].numss=$scope.updateNum;

$scope.msgs[index].price=$scope.updatePrice;

$scope.updateShow = false;

}
}

}

});
</script>
</body>

</html>

鱼宝宝2017

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端开发

输入产品名称: 数量排序:产品编号产品名称购买数量产品单价产品总价操作{{msg.bh}}{{msg.mc}}-+{{msg.dj}}{{msg.count*msg.dj}}总价:{{all()}}购买数量:{{allnum()}}商品编号: 产品名称: 购买数量: 产品单
复制链接

扫一扫