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

在学习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;
  }
}]);
滿天的星座
滿天的星座

membalas semua(3)
洪涛
洪涛2017-05-15 16:58:36 Tingkat 3

Mari kita lihat hasil larian dahulu: http://jsbin.com/vajeru/3/edit?html,js,output

Soalan anda adalah seperti berikut:

  • Kaedah pemadaman anda salah key == index Selepas memadamkan satu elemen, indeks tatasusunan bagi elemen seterusnya dalam $scope.datas akan berubah (tolak 1), dan indeks elemen akan sama dengan indeks yang perlu dipadamkan Ini akan memadamkan semua ahli selepas index Kaedah pemadaman telah ditulis semula, menggunakan kaedah splice tatasusunan

    • .

  • getNum() getTotal() Kedua-dua kaedah perlu dilaksanakan sekali apabila pengawal dimulakan Memandangkan tiada larian awal dan TotalNum dan TotalPrice tidak ditakrifkan semasa permulaan, terdapat dua The. nilai tidak akan dipaparkan. Dan anda mentakrifkan kedua-dua fungsi ini menggunakan kaedah pengisytiharan berubah-ubah, jadi memanggilnya sebelum mentakrifkannya ialah undefined

    • Dalam

  • getTotal(), anda salah mengeja price sebagai pirce, jadi $scope.TotalPrice akan menjadi NaN Jika anda menggunakan penapis number: 2, sudah tentu,

Selain itu, saya ingin memberi anda cadangan berikut:

Apabila jenis nilai
  • boleh ditentukan, jangan gunakan

    dan cuba gunakan =====

  • Pembolehubah mesti dimulakan sekali di kepala fungsi, contohnya, mulakan nombor kepada 0

  • Jangan panggil kaedah dalam gelung yang boleh dipanggil di luar gelung Contohnya, jika anda terus memanggil

    reduceNum()addNum() dalam getTotal()

    .
  • Apabila melintasi, apabila anda boleh melompat keluar dari gelung, cuba lompat keluar dari gelung seawal mungkin

Suka +0
Tambah Balasan
某草草
某草草2017-05-15 16:58:36 Tingkat 2

Kedua-dua jumlah diisytiharkan dalam fungsi yang sepadan Jika tiada siapa yang memanggil kedua-dua fungsi itu, bagaimanakah kedua-dua jumlah ini boleh wujud? Cara penulisan anda sangat tidak bersudut.

Suka +0
Tambah Balasan
漂亮男人
漂亮男人2017-05-15 16:58:36 Tingkat 1

1. Dalam kaedah memadam produk, kaedah _remove tidak betul cara memadam data indeks yang ditentukan dalam tatasusunan
2 Dalam kaedah getNum|getTotal, len tidak ditakrifkan juga masalah

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！