简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
前端 - angular购物车 商品总价与删除功能无效
滿天的星座
滿天的星座 2017-05-15 16:56:36
0
3
734

在学习angularjs的过程中，做了一个简易的购物车练手，碰到了以下两个问题
1.商品总价（$scope.TotalPrice）不起作用，在页面绑定了model，没有显示
2.删除()单个商品的时候，其他商品也会跟着删除
demo链接如下
http://jsbin.com/qometulete/edit?html,js,output
HTML代码如下

<!doctype html>
    <html lang="en" ng-app="shopCart">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>shop cart</title>
        <link rel="stylesheet" href="http://apps.bdimg.com/libs/todc-bootstrap/3.1.1-3.2.1/todc-bootstrap.min.css">
        <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
        <script src="http://apps.bdimg.com/libs/lodash/3.5.0/lodash.js"></script>
        <script src="src/scripts/shopcart.controller.js"></script>
    </head>
    <body ng-controller="shopCartCtrl">
        <p class="container">
            <p class="row">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th class="col-md-2">#</th>
                    <th class="col-md-2">商品</th>
                    <th class="col-md-2">单价</th>
                    <th class="col-md-2">数量</th>
                    <th class="col-md-2">增加</th>
                    <th class="col-md-2">减少</th>
                    <th class="col-md-2">小计</th>

                </tr>
            </thead>
            <tbody>
                <tr  ng-repeat="data in datas">
                    <th scope="row">{{data.id}}</th>
                    <td>{{data.name}}</td>
                    <td>{{data.price}}</td>
                    <td>{{data.count}}</td>
                    <td ng-click="addNum($index)">{{data.add}}</td>
                    <td ng-click="reduceNum($index)">{{data.reduce}}</td>
                    <td>{{data.count*data.price | currency}}</td>
             <th class="col-md-2" ng-click="delProduct($index,$event)">删除</th>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>{{TotalNum }}</td>
                    <td>{{TotalPrice | number:2}}</td>
                </tr>
            </tfoot>
        </table>
        </p>
        </p>
    </body>
    </html>

JS代码如下

var myApp = angular.module('shopCart',[]);
myApp.controller('shopCartCtrl',['$scope', function($scope) {
  //购物车信息
  $scope.datas = [
    {id:'1',name:'蜂蜜',price: 50,count: 1,add: '+', reduce: '-'},
    {id:'2',name:'黄豆酱',price: 77.5,count: 1,add: '+', reduce: '-'},
    {id:'3',name:'牛奶',price: 60,count: 1,add: '+', reduce: '-'}
  ];
  var len = $scope.datas.length;
  //点击'+'增加数量
  $scope.addNum = function($index) {
    for(i=0;i<len;i++) {
      if(i==$index) {
        $scope.datas[i].count++;
            getTotal();
      }
    }
  };
  //点击"-"减少数量
  $scope.reduceNum = function($index) {
    for(i=0;i<len;i++) {
      if(i==$index && $scope.datas[i].count!=0) {
        $scope.datas[i].count--;
            getTotal();
      }
    }
  };
  //删除商品
  $scope.delProduct = function(index,event) {
    _.remove($scope.datas,function(valule,key) {
      return key == index;
      //console.log(index);
      event.preventDefault();
    });

  }
  //商品总数量
 var getNum = function() {
   $scope.TotalNum = 0;
   for(i=0;i<len;i++) {
     $scope.TotalNum = $scope.TotalNum + $scope.datas[i].count;
   }
   return $scope.TotalNum;
 }
  //商品的总价
  var getTotal = function() {
    $scope.TotalPrice = 0;
    for(i=0;i<len;i++) {
      $scope.TotalPrice = $scope.TotalPrice + $scope.datas[i].pirce * $scope.datas[i].count;
    }
    return $scope.TotalPrice;
  }
}]);
滿天的星座
滿天的星座

모든 응답(3)
洪涛
洪涛2017-05-15 16:58:36 3층

먼저 실행 결과를 살펴보겠습니다: http://jsbin.com/vajeru/3/edit?html,js,output

귀하의 질문은 다음과 같습니다.

  • 삭제 방법이 잘못되었습니다. key == index 하나를 삭제하면 $scope.datas에 있는 후속 요소의 배열 인덱스가 변경됩니다(1씩 감소). 요소의 인덱스가 삭제하려는 인덱스와 동일하므로 index 이후의 모든 멤버가 삭제됩니다. splice를 사용하여 삭제 방법을 다시 작성했습니다. 배열 방법key == index 删除一个之后，$scope.datas 中其后的元素的数组索引会变化（减1），元素的索引又和需要删除的索引相同了，从而会删除 index 之后的所有的成员，删除方法已经重写，使用数组的 splice 方法

  • getNum() getTotal() 两个方法，需要在控制器初始化的时候，执行一次，由于没有初始运行，而且没有在初始化的时候定义 TotalNum 和 TotalPrice ，所以两个值是不会显示的。而且你是使用变量声明的方法定义的这两个函数，所以在定义它们之前调用会是 undefined

  • getTotal() 中，你把 price 拼写错为 pirce，从而 $scope.TotalPrice 会是 NaN，你用 number: 2 过滤器，当然就显示不出来

另外给你如下的建议：

  • 值可以确定类型的时候，比较不要使用 ==，尽量使用 ===

  • 变量一定要在函数的头部一次性初始化，比如，将数字初始化为 0

  • 不要在循环之中调用可以在循环之外调用的方法，比如你在 reduceNum() addNum() 里不停的调用 getTotal()

  • getNum() getTotal() 두 메서드는 컨트롤러 초기화 시 한 번만 실행되어야 하며 초기화 중에 정의되지도 않습니다. code>TotalNum 및 TotalPrice이므로 두 값은 표시되지 않습니다. 그리고 변수 선언 방법을 사용하여 이 두 함수를 정의했기 때문에 정의하기 전에 호출하면 정의되지 않음

getTotal()에서 price의 철자를 pirce로 잘못 입력했으므로 $scope.TotalPrice는 가 됩니다. >NaN, number: 2 필터를 사용하면 당연히 표시되지 않습니다🎜🎜 🎜 🎜또한 다음과 같은 제안을 드립니다. 🎜 🎜 🎜🎜값으로 유형을 결정할 수 있는 경우 ==를 사용하지 않고 ===를 사용하는 것이 좋습니다🎜🎜 🎜🎜변수는 함수의 선두에서 한 번 초기화되어야 합니다. 예를 들어 숫자를 0🎜🎜으로 초기화합니다. 🎜🎜루프 외부에서 호출할 수 있는 메서드를 루프에서 호출하지 마세요. 예를 들어 reduceNum() addNum()getTotal(()을 계속 호출하는 경우 /코드> )🎜🎜 🎜🎜횡단할 때 루프에서 벗어날 수 있을 때 최대한 빨리 루프에서 점프해 보세요🎜🎜 🎜
좋다 +0
답글 추가
某草草
某草草2017-05-15 16:58:36 2층

두 합계는 해당 함수에 선언되어 있습니다. 아무도 이 두 함수를 호출하지 않으면 어떻게 이 두 합계가 존재할 수 있나요? 글쓰는 방식이 너무 밋밋해요.

좋다 +0
답글 추가
漂亮男人
漂亮男人2017-05-15 16:58:36 1층

1. 상품 삭제 방법 중 _remove 방법이 잘못되었습니다.
2. getNum 및 getTotal 방법에 문제가 있습니다.

좋다 +0
답글 추가
인기 주제
더>
인기 기사
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！