html增删改查_增删查改html-CSDN博客

本文链接：https://blog.csdn.net/Aideat/article/details/79102406
<!DOCTYPE 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><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;x<arrs.length;x++) {

                            for (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"/><br />
                    商品名称:<input type="text" ng-model="IDname"/><br />
                    商品数量:<input type="text" ng-model="IDnum"/><br />
                    商品单价:<input type="text" ng-model="IDprice"*/

                    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>