国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

前端 - angular購物車 商品總價與刪除功能無效
滿天的星座
滿天的星座 2017-05-15 16:56:36
0
3
835

在學(xué)習(xí)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" >
        <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">數(shù)量</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;
  //點擊'+'增加數(shù)量
  $scope.addNum = function($index) {
    for(i=0;i<len;i++) {
      if(i==$index) {
        $scope.datas[i].count++;
            getTotal();
      }
    }
  };
  //點擊"-"減少數(shù)量
  $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();
    });

  }
  //商品總數(shù)量
 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;
  }
}]);
滿天的星座
滿天的星座

Antworte allen(3)
洪濤

先看可以運行的結(jié)果吧: http://jsbin.com/vajeru/3/edit?html,js,output

你的問題如下:

  • 你的刪除方法有誤,key == index 刪除一個之后,$scope.datas 中其后的元素的數(shù)組索引會變化(減1),元素的索引又和需要刪除的索引相同了,從而會刪除 index 之后的所有的成員,刪除方法已經(jīng)重寫,使用數(shù)組的 splice 方法

  • getNum() getTotal() 兩個方法,需要在控制器初始化的時候,執(zhí)行一次,由于沒有初始運行,而且沒有在初始化的時候定義 TotalNumTotalPrice ,所以兩個值是不會顯示的。而且你是使用變量聲明的方法定義的這兩個函數(shù),所以在定義它們之前調(diào)用會是 undefined

  • getTotal() 中,你把 price 拼寫錯為 pirce,從而 $scope.TotalPrice 會是 NaN,你用 number: 2 過濾器,當(dāng)然就顯示不出來

另外給你如下的建議:

  • 值可以確定類型的時候,比較不要使用 ==,盡量使用 ===

  • 變量一定要在函數(shù)的頭部一次性初始化,比如,將數(shù)字初始化為 0

  • 不要在循環(huán)之中調(diào)用可以在循環(huán)之外調(diào)用的方法,比如你在 reduceNum() addNum() 里不停的調(diào)用 getTotal()

  • 遍歷時,可以跳出循環(huán)的時候,盡量早點跳出循環(huán)

某草草

兩個 total 都是在對應(yīng)的函數(shù)里聲明的,如果沒人去調(diào)用那兩個函數(shù),這倆 total 怎么可能存在呢?你這樣的寫法太不 angular 了。

漂亮男人

1.刪除商品方法中 _remove方法不正確 自己改正如何在數(shù)組中刪除指定索引數(shù)據(jù)
2. getNum getTotal 方法中l(wèi)en沒有定義 也有問題

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage