angularjs验证

来源：互联网发布：手机网络兼职日结工资编辑：程序博客网时间：2024/06/06 04:40
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <!--样式-->    <style>        th,td{            width: 60px;            height: 40px;            border: 1px solid #69717d;        }        table{            border-collapse: collapse;            margin-top: 6px;        }        .inputlen{            width: 30px;            height: 10px;        }        a{            color: red;        }    </style>    <!--导包-->    <script src="angular-1.5.5/angular.min.js"></script>    <script>        /*模块*/        var myapp=angular.module("myapp",[]);        /*控制器*/        myapp.controller("myCtrl",function ($scope) {            /*数组*/            $scope.items=[                {                    done:false,                    name:"铅笔",                    price:2,                    number:1                },                {                    done:false,                    name:"钢笔",                    price:4,                    number:2                },                {                    done:false,                    name:"本子",                    price:6,                    number:3                }            ]            /*+*/            $scope.jia=function (index) {                $scope.items[index].number++;            }            /*-*/            $scope.jian=function (index) {                $scope.items[index].number--;                /*判断减到>=0*/                if($scope.items[index].number<=0){                    $scope.items[index].number=0;                }            }            /*全选*/            $scope.checkall=function () {                if ($scope.check1 == true) {                    for (var i = 0; i < $scope.items.length; i++) {                        $scope.items[i].done = true;                    }                }                else {                    for (var i = 0; i < $scope.items.length; i++) {                        $scope.items[i].done = false;                    }                }            }            /*反选*/            $scope.fx=function () {                var n=0;                for(var i=0;i<$scope.items.length;i++){                    if($scope.items[i].done==true){                        n++;                    }                }                if(n==$scope.items.length){                    $scope.check1=true;                }else {                    $scope.check1=false;                }            }            /*删除*/          /*  $scope.del=function ($index) {                $scope.items.splice($index,1);            }*/            $scope.del=function (index) {                if (confirm("您是否确认将该商品移除购物车？") == true) {                    $scope.items.splice(index, 1);                }               /* if( $scope.items.length=0){                    alert("您的购物车为空，请逛商城")                }*/            }            /*总价*/            $scope.money=function () {                var m=0;                for(var i=0;i<$scope.items.length;i++){                    if($scope.items[i].done==true){                        m+=$scope.items[i].price*$scope.items[i].number;                    }                }                return m;            }            /*显示隐藏*/            $scope.xian=false;            /*显示订单方法*/            $scope.showall=function () {                /*显示*/                $scope.xian=true;            }            /*添加：提示不为空*/            $scope.additem=function () {                    if($scope.name==""||$scope.name==null||$scope.price==""||$scope.price==null){                        $scope.cuo=true;                        $scope.cuo2=true;                    }else{                        $scope.items.push({'name':$scope.name,'price':$scope.price});                        /*隐藏*/                        $scope.xian=false;                    }            }        })    </script></head><body ng-app="myapp" ng-controller="myCtrl"><h2>我的购物车</h2><button ng-click="showall()">新增订单</button><div ng-show="xian">    <h3>新增订单</h3>    name：<input type="text" placeholder="请填写商品" ng-model="name"><br>    price：<input type="text" placeholder="请填写单价" ng-model="price"><br><!--提示不为空-->    <a ng-show="cuo">        商品名不能为空    </a><br>    <a ng-show="cuo2">        dj不能为空    </a><br>    <button ng-click="additem()">提交</button></div><table>    <tr>        <th><input type="checkbox" ng-click="checkall()" ng-model="check1"></th>        <th>name</th>        <th>price</th>        <th>number</th>        <th>tobalprice</th>        <th>option</th>    </tr>    <tr ng-repeat="item in items">        <td><input type="checkbox" ng-model="item.done" ng-click="fx()"></td>        <td>{{item.name}}</td>        <td>{{item.price}}</td>        <td><span ng-click="jia($index)">+</span><input type="text" ng-model="item.number" class="inputlen"><span ng-click="jian($index)">-</span></td>        <td>{{item.price*item.number}}</td>        <td><button ng-click="del($index)">删除</button></td>    </tr></table><div>    总价为：<span>{{money()}}</span></div></body></html>
阅读全文
0 0