购物车

AngularJS 通过新的性质和表达式扩展了
HTML,可以构建一个单一页面应用程序。AngularJS有着广大特点,最为核心的凡:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

图片 1

图片 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <script src="js/angular.min.js"></script>
</head>
<body ng-app="myApp">

<div ng-controller="myCtrl">

    <table>
        <thead>
                <tr>
                    <td><input type="checkbox" ng-model="select" ng-click="all()">全选</td>
                    <td>名称</td>
                    <td>单价</td>
                    <td>数量</td>
                    <td>金额</td>
                    <td>操作</td>
                </tr>
        </thead>

        <tbody>
            <tr ng-repeat="x in shopList ">
                <td><input type="checkbox" ng-model="x.m" ng-click="single(x)"></td>
                <td >{{x.info}}</td>
                <td>{{x.price}}</td>
                <td><input type="number" ng-model="x.count" ng-change="countPrice()"></td>
                <td>{{x.total}}</td>
                <td><button  ng-click="delete(x)">删除</button></td>
            </tr>
        </tbody>
    </table>
    <br>
    总价格{{allPrice}}
</div>
<script>
      //创建模块
       var  app = angular.module("myApp",[]);
       //创建控制器
      app.controller("myCtrl",function ($scope) {

          //购物车
          $scope.shopList = [
              { m:"false",num:"0",info:"苹果手机",price:4000,count:1,total:4000},
              { m:"false",num:"1",info:"运动鞋",price:500,count:1,total:500},
              { m:"false",num:"2",info:"电脑",price:5000,count:1,total:5000}
          ];


          $scope.countPrice=function () {
              //初始化总价格
              $scope.allPrice=0;

              angular.forEach($scope.shopList,function (data,index) {

                  data.total = data.price*data.count;

                  if(data.m==true){
                      $scope.allPrice+=data.total;
                  }


              })

          }

          //全选
          $scope.all=function () {
                console.log($scope.select)
              angular.forEach($scope.shopList,function (data,index) {
                 data.m=$scope.select;

              })
              $scope.countPrice();
          }

          //单选
          $scope.single=function (x) {
              angular.forEach($scope.shopList,function (data,index) {
                    if(x.m==data.m){
                        $scope.countPrice();
                    }

              })
          }

        //删除
          $scope.delete=function (x) {
              $scope.shopList.splice( $scope.shopList.indexOf(x),1)

     /*         angular.forEach($scope.shopList,function (data,index) {

               }*/
              //计算总价格
              $scope.countPrice();
          }

      })


</script>
</body>
</html>

相关文章