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;
}
}]);
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
getTotal()
, anda salah mengeja price
sebagai pirce
, jadi $scope.TotalPrice
akan menjadi NaN
Jika anda menggunakan penapis number: 2
, sudah tentu,
Apabila jenis nilai
dan cuba gunakan ==
===
reduceNum()
addNum()
dalam getTotal()
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