cari

Rumah  >  Soal Jawab  >  teks badan

Bahagian hadapan - jumlah harga cart beli-belah sudut dan fungsi pemadaman adalah tidak sah

Dalam proses pembelajaran angularjs, saya membuat latihan troli beli-belah yang mudah dan menghadapi dua masalah berikut
1 Jumlah harga produk ($scope.TotalPrice) tidak berfungsi. Model terikat di atas dan tidak dipaparkan
2 Apabila memadam () satu produk, produk lain juga akan dipadamkan dengan sewajarnya
Pautan demo adalah seperti berikut
http://jsbin.com/qometulete/edit?html,js,output
Kod HTML adalah seperti berikut

<!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>

Kod JS adalah seperti berikut

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;
  }
}]);
滿天的星座滿天的星座2808 hari yang lalu759

membalas semua(3)saya akan balas

  • PHP中文网

    PHP中文网2017-05-15 16:58:36

    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,

      < tidak akan menjadi dipaparkan. 🎜>
    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

      • balas
      0
  • 某草草

    某草草2017-05-15 16:58:36

    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.

    balas
    0
  • 漂亮男人

    漂亮男人2017-05-15 16:58:36

    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

    balas
    0
  • Batalbalas