混合开发(4)



<!DOCTYPE html>  

<html>  
    <head>  
        <meta charset="utf-8" />  
        <title></title>  
        <style>  
            /*隔行变色*/  
            .css1 {  
                background-color: antiquewhite;  
            }  
              
            .css2 {  
                background-color: burlywood;  
            }  
            /*按钮变小手*/  
            .sb {  
                cursor: pointer;  
            }  
        </style>  
        <script type="application/javascript" src="js/angular.min.js"></script>
        <script>  
            var app =angular.module("myApp",[]);  
            app.controller("myCtrl",function($scope){  
                //加入假数据  
                $scope.datas =[  
                    {  
                        id:1001,  
                        name:"iphone7",  
                        price:6888,  
                        num:1,  
                        state:false  
                    },  
                    {  
                        id: 1002,  
                        name: "iphone8",  
                        price: 7888,  
                        num: 1,  
                        state: false  
                    }, {  
                        id: 1003,  
                        name: "iphoneX",  
                        price: 8888,  
                        num: 1,  
                        state: false  
                    }  
                ];  
                //点击根据名字删除掉  
                $scope.del = function(na) {  
                    if(window.confirm("你确定删除" + na + "吗")) {  
                        for(index in $scope.datas) {  
                            if(na == $scope.datas[index].name) {  
                                $scope.datas.splice(index, 1);  
                            }  
                        }  
                    }  
                }  
                //点击-号减去数量  
                $scope.jian = function(index){  
                    if($scope.datas[index].num>1){  
                        $scope.datas[index].num--;  
                    }else{  
                        alert("不能再减了!你可以删除商品")  
                    }  
                }  
                //+号添加商品  
                $scope.jia = function(index){  
                    $scope.datas[index].num++;  
                }  
                //总价格  
                $scope.prices = function(){  
                    var p  = 0;  
                    for(var x = 0;x<$scope.datas.length;x++){  
                        p +=$scope.datas[x].num*$scope.datas[x].price;  
                    }  
                    return p;  
                }  
                //总数量  
                $scope.content = function(){  
                    var p = 0;  
                    for (var x = 0;x<$scope.datas.length;x++) {  
                        p+=$scope.datas[x].num;  
                    }  
                    return p ;  
                }  
                //添加页面  
                $scope.add = function(){  
                    var flag1 = false;  
                    var flag2 = false;  
                    var flag3 = false;   
                    var flag4 = false;  
                    //判断非空 必须为数字  
                    if($scope.ID==""||$scope.ID == null){  
                        alert("id不能为空");  
                        flag1 = false  
                    }else if(isNaN($scope.ID)){  
                        alert("id必须为数字");  
                        flag1= false;  
                    }else{  
                        flag1 = true;  
                    }  
                      
                    if($scope.IDname == "" || $scope.IDname == null) {  
                        alert("商品不能为空");  
                        flag2 = false;  
                    } else {  
                        flag2 = true;  
                    }  
                      
                    if($scope.IDnum == "" || $scope.IDnum == null) {  
                        alert("数量不能为空");  
                        flag3 = false;  
                    } else if(isNaN($scope.IDnum)) {  
                        alert("数量必须为数字");  
                        flag3 = false;  
                    } else {  
                        flag3 = true;  
                    }  
                      
                    if($scope.IDprice == "" || $scope.IDprice == null) {  
                        alert("单价不能为空");  
                        flag4 = false;  
                    } else if(isNaN($scope.IDprice)) {  
                        alert("单价必须为数字");  
                        flag4 = false;  
                    } else {  
                        flag4 = true;  
                    }  
                      
                    //点击添加 显示数据  
                    if(flag1 && flag2 && flag3&&flag4){  
                        $scope.datas.push({  
                            id:$scope.ID,  
                            name:$scope.IDname,  
                            num:$scope.IDnum,  
                            price:$scope.IDprice  
                        });  
                    }  
                }  
                  
                //全选反选  
 
                $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.delSelect = function(){  
                    var arr = [];  
                    for (index in $scope.datas) {  
                        if($scope.datas[index].state){  
                            arr.push($scope.datas[index].name);  
                        }  
                    }  
                    if(arr.length<=0){  
                        alert("请重新选择删除的项目");  
                    }else{  
                        if(window.confirm("确定要删除吗?")){  
                            for(index in arr){  
                                for (index2 in $scope.datas) {  
                                    if (arr[index]==$scope.datas[index2].name) {  
                                        $scope.datas.splice(index2,1);  
                                    }   
                                }  
                            }  
                        }else{  
                            alert("您已取消删除");  
                        }  
                    }  
                }  
                  
                //修改页面  
                $scope.updateShow = false;  
                $scope.updateId = "";  
                $scope.updateName = "";  
                $scope.updateNum = "";  
                $scope.updatePrice = "";  
                $scope.updateShowFun = function(aa){  
                    if(window.confirm("你确定要修改吗?")){  
                        $scope.updateShow = true;  
                        $scope.updateId = aa.id;  
                        $scope.updateName = aa.name;  
                        $scope.updateNum = aa.num;  
                        $scope.updatePrice = aa.price;  
                    }else{  
                        alert("你已经取消了修改");  
                    }  
                }  
                  
            });  
        </script>  
          
          
 
    </head>  
    <body ng-app="myApp" ng-controller="myCtrl">  
    <!-- <center>-->  
            <input type="text"  placeholder="请输入查询商品" ng-model="search"/>数量排序:  
            <select ng-model="selOrder">  
                <option value="num">数量正序</option>  
                <option value="num">数量倒序</option>  
            </select>  
              
            <button ng-click="delSelect()" class="sb">批量删除</button><br />  
            <table border="1px" cellpadding="0" cellspacing="0">  
                <thead>  
                    <tr align="center" style="background-color: aqua;">  
                        <td><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"/></td>  
                        <td width="100px">商品编号</td>  
                        <td width="100px">商品名称</td>  
                        <td width="230px">商品数量</td>  
                        <td width="100px">商品单价</td>  
                        <td width="100px">商品总价</td>  
                        <td width="110px">商品操作</td>  
                    </tr>  
                </thead>  
                  
                <tbody>  
                    <tr ng-repeat="a in datas | filter:{name:search}| orderBy:selOrder " class="{{ $even ? 'css1':'css2'}}" align="center">  
                        <td><input type="checkbox" ng-model="a.state" /></td>  
                        <td>{{a.id}}</td>  
                        <td>{{a.name}}</td>  
                        <td>  
                            <button ng-click="jian($index)">-</button>  
                            <input type="text" ng-model="a.num" />  
                            <button ng-click="jia($index)">+</button>  
                        </td>  
                        <td>{{a.price}}</td>  
                        <td>{{a.price*a.num}}</td>  
                        <td><button ng-click="del(a.name)" class="sb">删除</button>  
                            <button ng-click="updateShowFun(a)" class="sb">修改</button>  
                        </td>  
                    </tr>  
                </tbody>  
            </table>  
            <h3>总金额:{{prices()}}      总数量:{{content()}}</h1>  
            <form style="border: 1px solid yellow; width: 300px;">   
                    <h3>添加商品</h3>  
                    商品编号:<input type="text"  ng-model="ID"/><br /><br />  
                    商品名称:<input type="text" ng-model="IDname"/><br /><br />  
                    商品数量:<input type="text" ng-model="IDnum"/><br /><br />  
                    商品单价:<input type="text" ng-model="IDprice"/><br /><br />  
                    <button ng-click="add()" class="sb">添加</button>  
                </form>  
                <form style="border: 1px solid blue; width: 300px;" ng-show="updateShow">  
                    <h3>修改商品</h3> 商品编号:  
            <input type="text" placeholder="商品编号" ng-model="updateId" disabled="disabled" /><br /><br /> 商品名称:  
            <input type="text" placeholder="商品名称" ng-model="updateName" /><br /><br /> 商品数量:  
            <input type="text" placeholder="商品数量" ng-model="updateNum" /><br /><br /> 商品单价:  
            <input type="text" placeholder="商品单价" ng-model="updatePrice" /><br /><br />  
            <div style="border: 1px solid blue; width: 250px; background-color: pink;" ng-show="yz">  
                <ul>  
                    <li ng-repeat="chenk in updateArr">{{chenk}}</li>  
                </ul>  
            </div><br />  
            <input type="button" value="提交" ng-click="updateSub()" class="sb" />  
            </form>  
 
        <!--</center>-->  
    </body>  
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值