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

Bahagian hadapan - jumlah harga cart beli-belah sudut dan fungsi pemadaman adalah tidak sah
滿天的星座
滿天的星座 2017-05-15 16:56:36
0
3
837

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" >
        <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">單價(jià)</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">小計(jì)</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;
  //點(diǎn)擊'+'增加數(shù)量
  $scope.addNum = function($index) {
    for(i=0;i<len;i++) {
      if(i==$index) {
        $scope.datas[i].count++;
            getTotal();
      }
    }
  };
  //點(diǎn)擊"-"減少數(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;
 }
  //商品的總價(jià)
  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)
洪濤

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

某草草

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.

漂亮男人

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

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan