Angular 模拟简单购物车

最新推荐文章于 2019-07-10 15:23:16 发布

fairy_414

最新推荐文章于 2019-07-10 15:23:16 发布

阅读量159

点赞数

分类专栏： AngularJs

本文链接：https://blog.csdn.net/xw_414/article/details/79083625

版权

AngularJs 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html ng-app="App">

   <head>
       <meta charset="UTF-8">
       <title></title>
       <script src="../libs/angular.min.js"></script>
       <style>
           a {
               color: red;
               text-decoration: none;
               margin-left: 170px;
           }
       </style>
       <script>
           var App = angular.module("App", []);
           App.controller("Demo", function($scope) {

               $scope.datas = [{

                   state: false,
                   pic: "ab.jpg",
                   goodsname: "纯手工制作木质时钟精致家具装饰摆件",
                   nums: 1,
                   price: 150

               }, {
                   state: false,
                   pic: "ae.jpg",//图片
                   goodsname: "木质蓝牙音箱包邮实木家具装饰摆件",
                   nums: 2,
                   price: 119
               }, {
                   state: false,
                   pic: "an.jpg",
                   goodsname: "装饰木雕，独特趣味设计家具装饰摆件",
                   nums: 0,
                   price: 120
               }]

               //数量减减
               $scope.jian = function(index) {
                       if($scope.datas[index].nums < 1) {
                           alert("数量不能为负数！");
                       } else {
                           $scope.datas[index].nums--;

                       }

                   }
                   //数量加加
               $scope.jia = function(index) {
                   $scope.datas[index].nums++;
               }

               //删除数据
               $scope.del = function(index) {
                       if(confirm("确认要删除么？")) {
                           $scope.datas.splice(index, 1);

                       }

                   }
                   //全选或全不选
               $scope.checkedAllFun = function() {

                   if($scope.checkedAll) {
                       for(var x = 0; x < $scope.datas.length; x++) {
                           $scope.datas[x].state = true;

                       }

                   } else {
                       for(var x = 0; x < $scope.datas.length; x++) {
                           $scope.datas[x].state = false;

                       }
                   }
               }

               //计算总价
               $scope.totalprice = function() {
                   $scope.to_price = 0;
                   for(var i = 0; i < $scope.datas.length; i++) {
                       $scope.to_price += $scope.datas[i].nums * $scope.datas[i].price;
                   }

               }
               $scope.to_price = 0;
           })
       </script>

   </head>

   <body ng-controller="Demo">
       <center>
           <h1>购物车</h1>
           <table>
               <tr ng-repeat="x in datas">
                   <td><input type="checkbox" ng-model="x.state" /></td>
                   <td><img ng-src="{{x.pic}}" /></td>
                   <td><span>{{x.goodsname}}</span><br /><br />
                       <span>{{x.price}}</span> <br /><br />
                       <button ng-click="jian($index)">-</button> {{x.nums}}
                       <button ng-click="jia($index)">+</button>
                       <a href="#" ng-click="del($index)">删除</a>
                   </td>
               </tr>
               <tr>
                   <td><input type="checkbox" ng-click="checkedAllFun()" ng-model="checkedAll" />全选 </td>
                   <td>           合计：{{to_price}} </td>
                   <td><button ng-click="totalprice()">结算</button></td>
               </tr>
           </table>

       </center>
   </body>

</html>

fairy_414

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angular 模拟简单购物车

a { color: red; text-decoration: none; margin-left: 170px; } var App = angular.module("App", []);
复制链接

扫一扫