angular JS购物车

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="js/ionic.min.css" />
        <script type="text/javascript" src="js/ionic.bundle.min.js" ></script>
        <script>
            var app = angular.module("myApp", ["ionic"]);
            app.controller("myCtrl", function($scope) {
                $scope.items = [{
                    name:"纯手工制作木质时钟精致家具",
                    price:150,
                    num:1,
                    url:"img/a.jpg",
                    done:false
                },{
                    name:"纯手工制作木质时钟",
                    price:119,
                    num:2,
                    url:"img/b.jpg"
                },{
                    name:"纯手工制作时钟精致家具",
                    price:120,
                    num:0,
                    url:"img/c.jpg",
                    done:false
                }];
                //减少
                $scope.less=function(index){

                    if($scope.items[index].num==0)
                    {
                        alert("不能再减了");

                    }else{

                        $scope.items[index].num-=1;
                        $scope.allPrice=0;
                    for(index in $scope.items){

                        if($scope.items[index].done)
                        {
                            $scope.allPrice=$scope.allPrice+$scope.items[index].price*$scope.items[index].num;
                        }
                    }
                    }
                }
                //增加
                $scope.more=function(index)
                {

                    $scope.items[index].num+=1;
                    $scope.allPrice=0;
                    for(index in $scope.items){

                        if($scope.items[index].done)
                        {
                            $scope.allPrice=$scope.allPrice+$scope.items[index].price*$scope.items[index].num;
                        }
                    }
                }
                //删除
                $scope.del=function(name){

                var nameitem=[];
                for(index in $scope.items)
                {
                    if(name==$scope.items[index].name)
                    {
                        nameitem.push(name);
                    }
                }
                    if(nameitem.length>0)
                    {
                        for(index in nameitem)
                        {
                            var names=nameitem[index];
                            for(index2 in $scope.items)
                            {
                                if(names==$scope.items[index2].name)
                                {
                                    $scope.items.splice(index2,1);
                       $scope.allPrice=0;
                    for(index in $scope.items){
                        if($scope.items[index].done)
                        {
                            $scope.allPrice=$scope.allPrice+$scope.items[index].price*$scope.items[index].num;
                        }
                    }
                                }
                            }
                        }
                    }
               }
                //全选
                $scope.selectAll=false;
                $scope.allPrice=0;
                $scope.checkSelAll=function(){
                    if($scope.selectAll)
                    {
                        for(index in $scope.items)
                        {
                          $scope.items[index].done=false;
                        }
                         $scope.selectAll=false;
                         $scope.allPrice=0;
                    }else{
                        for(index in $scope.items)
                        {
                          $scope.items[index].done=true;
                        }
                        for(index in $scope.items)
                        {
                         $scope.allPrice=$scope.items[index].num*
                         $scope.items[index].price+$scope.allPrice;
                        }
                        $scope.selectAll=true;
                    }
                }
                //每选中一个,计算一下
                $scope.selectItem=function(index)
                {
                    $scope.allPrice=0;
                    for(index in $scope.items){
                        if($scope.items[index].done)
                        {
                            $scope.allPrice=$scope.allPrice+$scope.items[index].price*$scope.items[index].num;
                        }
                    }
                }
            });
        </script>
        <style>
            #myInput {
                margin-right: 40px;
                margin-left: 50px;
            }
            img{vertical-align:middle;margin-top: 6px;}
        </style>
    </head>

    <body ng-app="myApp" ng-controller="myCtrl">
        <ion-header-bar align-title="center" class="bar-positive">
            <h1 class="title">购物车</h1>
        </ion-header-bar>
        <ion-content>
            <ion-checkbox ng-model="isChecked">趣艺工坊</ion-checkbox>
            
            <ion-list>
                <ion-item ng-repeat="item in items">
                    <div style="width: 100%; height: 100px;">
                        <div style="float: left;">
                            <input id="myInput" type="checkbox" ng-model="item.done" ng-click="selectItem($index)"/>
                            <img src="{{item.url}}" />
                        </div>
                        <div style="float: left; margin-left: 50px;">
                            <span>{{item.name}}</span><br/><br/>
                            <span >{{item.price|currency:"￥："}}</span><br /><br />
                            <button ng-click="less($index)">-</button>
                            {{item.num}}
                            <button ng-click="more($index)">+</button>
                            <span style="margin-left: 200px;" ng-click="del(item.name)">删除</span>
                        </div>
                    </div>
                </ion-item>
            </ion-list>
            <div style="width: 100%; height: 100px; margin-top: 50px;">
                <input id="selectAll" type="checkbox" ng-model="selectAll" ng-click="checkSelAll()" />全选
                <span style="margin-left: 250px;">合计：<span>{{allPrice | currency:"￥："}}</span></span>
                <button style="margin-left: 50px;">结算</button>
            </div>
        </ion-content>

    </body>

</html>

猜你喜欢