html增删改查
<html ng-app="App">
<head>
<meta charset="UTF-8">
<title>title>
<style>
.css1{
background-color: red;
}
.css2{
background-color: brown;
}
style>
head>
<body ng-controller="Demo">
<input type="text" placeholder="请输入查询商品" ng-model="search" />
数量排序:
<select ng-model="selOrder">
<option value="nums">数量正序option>
<option value="-nums">数量倒序option>
select>
<button ng-click="delSelect()" class="sb">批量删除button><br />
<table border="2px" cellspacing="0">
<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:{name:search}| orderBy:selOrder" class="{{ $even ? 'css1':'css2'}}">
<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 type="number" ng-model="x.nums"/>
<button ng-click="add($index)">+button>
td>
<td>{{x.prices}}td>
<td>{{x.prices*x.nums}}td>
<td><button ng-click="remove($index)">移除button>
<button ng-click="updateShowFun($index)">修改button>
td>
tr>
table>
<div>
<span>总价span>
<span>{{totalPrice()}}h3>
<span>总数h3>
<span>{{totalNum()}}h3>
<button ng-click="removeAll()">清空购物车button>
div>
<form style="border: 1px solid yellow; width: 260px;">
商品编号:<input type="text" ng-model="ID"/><br />
商品名称:<input type="text" ng-model="IDname"/><br />
商品数量:<input type="number" ng-model="IDnum"/><br />
商品单价:<input type="text" ng-model="IDprice"/><br />
<button ng-click="add333()">添加button>
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="number" ng-model="updateNum"/><br />
商品单价:<input type="number" ng-model="updatePrice"/><br />
<button type="button" value="提交" ng-click="updateSub()">提交button>
form>
<script src="../libs/angular.min.js">script>
<script>
var App = angular.module("App",[]);
App.controller("Demo",function($scope){
//数据
$scope.datas = [
{
id:1001,
name:"ihone8",
nums:1,
prices:3888,
state: false
}
,
{
id:1002,
name:"ihone10",
nums:1,
prices:6888,
state: false
}
,
{
id:1003,
name:"ihone7",
nums:1,
prices:5888,
state: false
}
];
//数量减减
$scope.jian = function(index){
$scope.datas[index].nums--;
}
//数量加加
$scope.add = function(index){
$scope.datas[index].nums++;
}
//移除的
$scope.remove = function(index){
if(confirm("确定要移除吗?")){
$scope.datas.splice(index,1);
}
}
//全选和反选
$scope.selectAllFun = function(){
if($scope.selectAll){
//如果是true的话，把下面的都选中
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;xfor (var x2=0;x2<$scope.datas.length;x2++) {
if(arrs[x]==$scope.datas[x2].name){
//删除
$scope.datas.splice(x2,1);
}
}
}
}
}
//总价
$scope.totalPrice = function(){
var totalPrice=0;
for (var x=0;x<$scope.datas.length;x++) {
totalPrice+=$scope.datas[x].prices *$scope.datas[x].nums;
}
return totalPrice;
}
//总数
$scope.totalNum = function(){
var totalNums=0;
for (var x=0;x<$scope.datas.length;x++) {
totalNums+=$scope.datas[x].nums;
}
return totalNums;
}
//清空购物车
$scope.removeAll = function(){
$scope.datas =[];
}
//增加数据的方法
$scope.add333 = function(){
/*ng-model="ID"/>
商品名称:
商品数量:
商品单价:
var flag1 = false;
if($scope.ID=="" || $scope.ID==null){
flag1 = false;
alert("ID不能为空")
return;
}else if(isNaN($scope.ID)){ //如果传入的参数是非数字返回true,如果是数字返回false
flag1 = false;
alert("ID必须是数字")
return;
}else{
flag1 = true;
}
if($scope.IDname=="" || $scope.IDname==null){
flag1 = false;
alert("IDname不能为空")
return;
}else{
flag1 = true;
}
if($scope.IDnum=="" || $scope.IDnum==null){
flag1 = false;
alert("IDnum不能为空")
return;
}else if(isNaN($scope.IDnum)){ //如果传入的参数是非数字返回true,如果是数字返回false
flag1 = false;
alert("IDnum必须是数字")
return;
}else{
flag1 = true;
}
if($scope.IDprice=="" || $scope.IDprice==null){
flag1 = false;
alert("IDnum不能为空")
return;
}else if(isNaN($scope.IDprice)){ //如果传入的参数是非数字返回true,如果是数字返回false
flag1 = false;
alert("IDnum必须是数字")
return;
}else{
flag1 = true;
}
if(flag1){
//添加数据到原始的集合里面
$scope.datas.push({
id:$scope.ID,
name:$scope.IDname,
nums:$scope.IDnum,
prices:$scope.IDprice,
});
}
}
var index333 = 0;
//修改的
$scope.updateShowFun = function(index){
index333=index;
if(confirm("确定要修改吗")){
$scope.updateShow = true;
}
}
//提交按钮
$scope.updateSub = function(){
$scope.datas[index333].id = $scope.updateId;
$scope.datas[index333].name = $scope.updateName;
$scope.datas[index333].nums= $scope.updateNum;
$scope.datas[index333].prices = $scope.updatePrice;
/*for (var x=0;x<$scope.datas.length;x++) {
$scope.datas.[index333]
if($scope.datas[x].id==$scope.updateId){
$scope.datas[x].id = $scope.updateId;
$scope.datas[x].name = $scope.updateName;
$scope.datas[x].nums= $scope.updateNum;
$scope.datas[x].prices = $scope.updatePrice;
}
}*/
}
});
script>
body>
html>
展示图片
