购物车数量加减,增删改查

最新推荐文章于 2022-04-26 03:13:42 发布

原创

最新推荐文章于 2022-04-26 03:13:42 发布 · 3.3k 阅读

2 ·

CC 4.0 BY-SA版权

这篇博客展示了如何利用AngularJS实现一个简单的购物车管理功能，包括商品的增删改查、数量加减、全选清空以及按价格和数量排序。用户可以输入关键字搜索商品，对购物车中的商品进行操作，如修改数量、删除商品，以及查看购物车总价。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           select{
               margin-left: 200px;
           }
           .btn01{
               background: greenyellow;
           }
       </style>
       <script src="js/angular.min.js"></script>
       <script>
           var app = angular.module("zyapp",[]);
           app.controller("demoa",function($scope){
               //创建数据
               $scope.px='-gprice';
               $scope.px='-gnum';
               $scope.sj=true;
               $scope.goods=[{ck:false,gname:'鼠标',gprice:80,gnum:1},{ck:false,gname:'键盘',gprice:280,gnum:1},{ck:false,gname:'水杯',gprice:50,gnum:1},{ck:false,gname:'耳机',gprice:79,gnum:1},];

               //全选
               $scope.chAll = function() {
                   for(var i = 0; i < $scope.goods.length; i++) {