输入框添加信息

最新推荐文章于 2022-09-21 21:51:49 发布

nijiadalinge

最新推荐文章于 2022-09-21 21:51:49 发布

阅读量309

点赞数

分类专栏：移动开发

本文链接：https://blog.csdn.net/NIJIADALINGE/article/details/79027207

版权

移动开发专栏收录该内容

58 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            table tr:nth-child(even){background: #eee;}
            tr button{
                width: 30px;
            }
        </style>
        
        <script src="js/jquery-1.11.1.js"></script>
        <script src="js/angular.min.js"></script>
        <script>
            var sapp = angular.module("linrenjiang",[]);
            sapp.controller("con",function($scope){
                $scope.stus=[];
                
                $scope.add = function(){
                    if($scope.uname==undefined || $scope.uname == "" || $scope.uname.length<=2 || $scope.uname.length>20){
                        alert("商品名称输入有误！");
                    }else if($scope.typer == undefined || $scope.typer.length<=1 || $scope.typer.length>20 || $scope.typer==""){
                        alert("商品类型输入有误！");
                    }else if($scope.price<0 || $scope.price == undefined){
                        alert("商品价格输入有误！");
                    }else{
                        if($scope.shu == null){
                            $scope.shu = 1;
                        }
                        var good ={name1:$scope.uname,typer:$scope.typer,price:$scope.price,shu:$scope.shu};
                        $scope.stus.push(good);
                        
                    }
                }
                
                $scope.del = function(s){
                    if(confirm("确定删除吗？")){
                        $scope.stus.splice(s,1);
                    }
                }
                $scope.sum = function(){
                    var zong1 = 0;
                    for(var i in $scope.stus){
                        zong1 = zong1+$scope.stus[i].price*$scope.stus[i].shu;
                    }
                    return zong1;
                }
                
                $scope.num = function(cc,index){
                    if($scope.stus[index].shu>=1){
                        $scope.stus[index].shu = $scope.stus[index].shu+cc;
                    }else{
                        if(confirm("是否删除该商品？")){
                            $scope.stus.splice(index,1);
                        }
                    }
                }
                
            })
        </script>
        
    </head>
    <body ng-app="linrenjiang" ng-controller="con">
        商品名称:<input ng-model="uname" />
        商品类型:<input ng-model="typer" />
        商品价格:<input type="number" ng-model="price" />
        商品数量:<input type="number"  ng-model="shu"/>
        <button ng-click="add()">添加</button>
        
        <table width="800" border="2" cellspacing="0">
            <tr style="background: #999;">
                <th>商品序号</th>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>商品数量</th>
                <th>商品类型</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
            <tr ng-repeat="s in stus">
                <td>{{$index}}</td>
                <td>{{s.name1}}</td>
                <td>{{s.price}}</td>
                <td><button ng-click="num(-1,$index)">-</button> <input style="width: 30px;" ng-model="s.shu" /><button ng-click="num(1,$index)">+</button> </td>
                <td>{{s.typer}}</td>
                <td>{{s.price*s.shu}}</td>
                <td><button ng-click="del($index)" style="width: 60px">删除</button></td>
            </tr>
        </table>
        
        <p style="margin-left: 600px;">总计:{{sum()}}</p>
    </body>
</html>

nijiadalinge

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
输入框添加信息

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; table tr:nth-child(even){backgr
复制链接

扫一扫