码迷,mamicode.com
首页 > Web开发 > 详细

HTML angular购物车

时间:2017-10-15 21:10:05      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:sbo   order   select   module   change   class   confirm   derby   dex   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第三周周考</title>
    <script type="text/javascript" src="angular.js" ></script>
    <script src="jquery-3.2.1.js"></script>
    <script>
        var app=angular.module("myApp",[]);
        app.controller("myController",function($scope){
            $scope.user=[
                {checked:false,id:"1324",name:"ipad",price:"3400.00",num:"10",item:"0"},
                {checked:false,id:"4567",name:"aphone",price:"6400.00",num:"100",item:"1"},
                {checked:false,id:"3546",name:"mypad",price:"4400.00",num:"20",item:"2"},
                {checked:false,id:"1987",name:"zpad",price:"8400.00",num:"120",item:"3"}
            ]
            $scope.nc=function(index){
                if($scope.user[index].checked==false){
                    alert("请选中后删除");
                }else{
                    if(confirm("确认删除")){
                        $scope.user.splice(index,1)
                    }
                }

            }
            $scope.qs=function(){
                for(var i=0;i<$scope.user.length;i++){
                    if($scope.user[i].checked==false){
                        alert("请选中后删除");
                    }else{
                        if(confirm("确认全删")){
                            $scope.user=[];
                        }
                    }
                }
            }
            $scope.selectAllClick=function(sa){
                for(var i=0;i<$scope.user.length;i++){
                    $scope.user[i].checked=sa;
                }
            }
            $scope.echoChange=function(ck,id){
                if(ck==false){
                    $scope.user[id].checked=true;
                  }else{
                    $scope.user[id].checked=false;
                }
            }
            $scope.togg=function(tit){
                $scope.title=tit;
                $scope.desc = !$scope.desc;
            }

        })
    </script>
    <style>
        .d{
            width:100%;
            height: 50px;
            background: gainsboro;
        }
        td{
            background: white;
        }
    </style>
</head>
<body ng-app="myApp" ng-controller="myController">

<div class="d">
<input type="text"style="float: left;line-height: 30px" ng-model="serch">
<button style="float: right;line-height: 30px" ng-click="qs()">批量删除</button>
</div>
<table style="width: 100%; height: 400px; background: gainsboro;margin-top: 40px" cellspacing="1px">
    <tr>
        <td><input type="checkbox" ng-model="selectAll" ng-click="selectAllClick(selectAll)"></td>
        <td ng-click="togg(‘id‘)">商品编号</td>
        <td ng-click="togg(‘name‘)">商品名称</td>
        <td ng-click="togg(‘price‘)">商品价格</td>
        <td ng-click="togg(‘num‘)">商品库存</td>
        <td>数据操作</td>
    </tr>
    <tr ng-repeat="u in user|filter:serch|orderBy:title:desc">
        <td><input type="checkbox" ng-checked="u.checked"ng-click="echoChange(u.checked,$index)"></td>
        <td>{{u.id}}</td>
        <td>{{u.name}}</td>
        <td>¥:{{u.price}}</td>
        <td>{{u.num}}</td>
        <td><button ng-click="nc($index)">删除</button></td>
    </tr>
</table>
</body>
</html>

HTML angular购物车

标签:sbo   order   select   module   change   class   confirm   derby   dex   

原文地址:http://www.cnblogs.com/qq402792989/p/7673925.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!