<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../libs/angular.min.js"></script>
<style type="text/css">
table tr:nth-child(1) {
background-color: gainsboro;
}
tr:nth-child(even) {
background-color: navajowhite;
}
tr:nth-child(odd) {
background-color: goldenrod;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<input type="text" placeholder="请输入查询商品" ng-model="sel" />数量排序:
<select ng-model="selOrder">
<option></option>
<option value="nums">按数量的正序排</option>
<option value="-nums">按数量的正序排</option>
</select><button ng-click="pldel">批量删除</button>
<table border="1px" cellspacing="0px" style="width: 60%;">
<tr>
<td>
<input type="checkbox" ng-click="selectAllfun()" ng-model="selectAll" />
</td>
<td>商品编号</td>
<td>商品名称</td>
<td>商品数量</td>
<td>商品单价</td>
<td>商品总价</td>
<td>商品操作</td>
</tr>
<tr ng-repeat="x in datas | filter:{name:sel} |orderBy:selOrder">
<td><input type="checkbox" ng-model="x.state" /></td>
<td>{{x.bh}}</td>
<td>{{x.name}}</td>
<td><button ng-click="jian($index)">-</button><input type="number" ng-model="x.nums" /> <button ng-click="add($index)">+</button> </td>
<td>{{x.price | currency:"￥"}}</td>
<td>{{x.nums*x.price | currency:"￥"}}</td>
<td><button ng-click="remove($index)">删除</button><button>修改</button></td>
</tr>
</table>
<b><span>总金额:</span></b><span ng-bind="zj()"></span> <b><span >总数量:</span><span ng-bind="zs()"></span> </b>
<br />
<fieldset style="width: 240px; height: 320px; border: solid yellow;">
<legend>新增商品</legend>
<h3 style="text-align: center;">添加商品</h3>
商品编号:<input type="text" ng-model="bh1"/><br /><br />
商品名称:<input type="text" ng-model="name1"/><br /><br />
商品数量:<input type="number" ng-model="nums1"/><br /><br />
商品单价:<input type="text" ng-model="price1"/><br /><br /><br />
<button style="margin-left: 100px;" ng-click="insert()">添加</button>
</fieldset>
<fieldset style="width: 240px; height: 320px; border: solid blue;">
<h3>修改商品</h3>
商品编号:<input type="text" ng-model="bh2"/><br /><br />
商品名称:<input type="text" ng-model="name2"/><br /><br />
商品数量:<input type="text" ng-model="nums2"/><br /><br />
商品单价:<input type="text" ng-model="price2"/><br /><br /><br />
<button style="margin-left: 100px;" ng-click="updateSub()">提交</button>
</fieldset>
<tr>
<td> </td>
</tr>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.updateSub = function() {
$scope.datas[index].bh2=$scope.datas[index].bh;
}
$scope.selectAll=false;
//全选 反选
$scope.selectAllfun=function(){
if($scope.selectAll){
for (index in $scope.datas) {
$scope.datas[index].state=true;
}
}else{
for (index in $scope.datas) {
$scope.datas[index].state=false;
}
}
}
if($scope.bh1==""||$scope.bh1==null){
alert("编号不能为空");
}else if($scope.name1==""||$scope.name1==null){
alert("名字不能为空");
}else if($scope.nums1==""||$scope.nums1==null){
alert("数量为空");
}else if(isNaN($scope.nums1)){
alert("数量必须是数字");
}else if($scope.price1==""||$scope.price1==null){
alert("单价不能为空");
}else if(isNaN($scope.price1)){
alert("单价必须是数字");
}else{
$scope.datas.push({
bh: $scope.bh1,
name: $scope.name1,
nums: $scope.nums1,
price: $scope.price1,
});
}
}
$scope.submit=function(){
}
$scope.datas = [{
bh: 1001,
name: "inphone7",
nums: 1,
price: 6666,
}, {
bh: 1002,
name: "inphone8",
nums: 1,
price: 8888,
}, {
bh: 1003,
name: "inphone6p",
nums: 1,
price: 8666,
}, ]
$scope.jian = function(index) {
if($scope.datas[index].nums > 1) {
$scope.datas[index].nums--;
} else {
alert("不可以再减啦")
}
}
$scope.add = function(index) {
$scope.datas[index].nums++;
}
$scope.remove = function(index) {
if(confirm("确定删除吗？")) {
$scope.datas.splice(index, 1);
}
}
$scope.zj = function() {
var zj = 0;
for(var x = 0; x < $scope.datas.length; x++) {
zj += $scope.datas[x].nums * $scope.datas[x].price;
}
return zj;
}
$scope.zs = function() {
var zs = 0;
for(var x = 0; x < $scope.datas.length; x++) {
zs += $scope.datas[x].nums;
}
return zs;
}
});
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../libs/angular.min.js"></script>
<style type="text/css">
table tr:nth-child(1) {
background-color: gainsboro;
}
tr:nth-child(even) {
background-color: navajowhite;
}
tr:nth-child(odd) {
background-color: goldenrod;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<input type="text" placeholder="请输入查询商品" ng-model="sel" />数量排序:
<select ng-model="selOrder">
<option></option>
<option value="nums">按数量的正序排</option>
<option value="-nums">按数量的正序排</option>
</select><button ng-click="pldel">批量删除</button>
<table border="1px" cellspacing="0px" style="width: 60%;">
<tr>
<td>
<input type="checkbox" ng-click="selectAllfun()" ng-model="selectAll" />
</td>
<td>商品编号</td>
<td>商品名称</td>
<td>商品数量</td>
<td>商品单价</td>
<td>商品总价</td>
<td>商品操作</td>
</tr>
<tr ng-repeat="x in datas | filter:{name:sel} |orderBy:selOrder">
<td><input type="checkbox" ng-model="x.state" /></td>
<td>{{x.bh}}</td>
<td>{{x.name}}</td>
<td><button ng-click="jian($index)">-</button><input type="number" ng-model="x.nums" /> <button ng-click="add($index)">+</button> </td>
<td>{{x.price | currency:"￥"}}</td>
<td>{{x.nums*x.price | currency:"￥"}}</td>
<td><button ng-click="remove($index)">删除</button><button>修改</button></td>
</tr>
</table>
<b><span>总金额:</span></b><span ng-bind="zj()"></span> <b><span >总数量:</span><span ng-bind="zs()"></span> </b>
<br />
<fieldset style="width: 240px; height: 320px; border: solid yellow;">
<legend>新增商品</legend>
<h3 style="text-align: center;">添加商品</h3>
商品编号:<input type="text" ng-model="bh1"/><br /><br />
商品名称:<input type="text" ng-model="name1"/><br /><br />
商品数量:<input type="number" ng-model="nums1"/><br /><br />
商品单价:<input type="text" ng-model="price1"/><br /><br /><br />
<button style="margin-left: 100px;" ng-click="insert()">添加</button>
</fieldset>
<fieldset style="width: 240px; height: 320px; border: solid blue;">
<h3>修改商品</h3>
商品编号:<input type="text" ng-model="bh2"/><br /><br />
商品名称:<input type="text" ng-model="name2"/><br /><br />
商品数量:<input type="text" ng-model="nums2"/><br /><br />
商品单价:<input type="text" ng-model="price2"/><br /><br /><br />
<button style="margin-left: 100px;" ng-click="updateSub()">提交</button>
</fieldset>
<tr>
<td> </td>
</tr>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.updateSub = function() {
$scope.datas[index].bh2=$scope.datas[index].bh;
}
$scope.selectAll=false;
//全选 反选
$scope.selectAllfun=function(){
if($scope.selectAll){
for (index in $scope.datas) {
$scope.datas[index].state=true;
}
}else{
for (index in $scope.datas) {
$scope.datas[index].state=false;
}
}
}
//添加
$scope.insert=function(){if($scope.bh1==""||$scope.bh1==null){
alert("编号不能为空");
}else if($scope.name1==""||$scope.name1==null){
alert("名字不能为空");
}else if($scope.nums1==""||$scope.nums1==null){
alert("数量为空");
}else if(isNaN($scope.nums1)){
alert("数量必须是数字");
}else if($scope.price1==""||$scope.price1==null){
alert("单价不能为空");
}else if(isNaN($scope.price1)){
alert("单价必须是数字");
}else{
$scope.datas.push({
bh: $scope.bh1,
name: $scope.name1,
nums: $scope.nums1,
price: $scope.price1,
});
}
}
$scope.submit=function(){
}
$scope.datas = [{
bh: 1001,
name: "inphone7",
nums: 1,
price: 6666,
}, {
bh: 1002,
name: "inphone8",
nums: 1,
price: 8888,
}, {
bh: 1003,
name: "inphone6p",
nums: 1,
price: 8666,
}, ]
$scope.jian = function(index) {
if($scope.datas[index].nums > 1) {
$scope.datas[index].nums--;
} else {
alert("不可以再减啦")
}
}
$scope.add = function(index) {
$scope.datas[index].nums++;
}
$scope.remove = function(index) {
if(confirm("确定删除吗？")) {
$scope.datas.splice(index, 1);
}
}
$scope.zj = function() {
var zj = 0;
for(var x = 0; x < $scope.datas.length; x++) {
zj += $scope.datas[x].nums * $scope.datas[x].price;
}
return zj;
}
$scope.zs = function() {
var zs = 0;
for(var x = 0; x < $scope.datas.length; x++) {
zs += $scope.datas[x].nums;
}
return zs;
}
});
</script>
</body>
</html>
660
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
