Dans le processus d'apprentissage d'Angularjs, j'ai fait une simple pratique de panier d'achat et j'ai rencontré les deux problèmes suivants
1 Le prix total du produit ($scope.TotalPrice) ne fonctionne pas. Le modèle est lié ci-dessus et n'est pas affiché
2 Lors de la suppression () d'un seul produit, les autres produits seront également supprimés en conséquence
Le lien de démonstration est le suivant
. http://jsbin.com/qometulete/edit?html,js,output
Le code HTML est le suivant
<!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>
Le code JS est le suivant
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;
}
}]);
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Jetons d'abord un coup d'œil aux résultats en cours : http://jsbin.com/vajeru/3/edit?html,js,output
Votre question est la suivante :
-
De plus, j'aimerais vous faire les suggestions suivantes :Votre méthode de suppression est erronée.
key == indexAprès avoir supprimé un élément, l'index du tableau des éléments suivants dans$scope.dataschangera (moins 1) et l'index de l'élément sera le même que celui de l'élément. index qui doit être supprimé. Cela supprimera tous les membres aprèsindexLa méthode de suppression a été réécrite, en utilisant la méthodesplicedu tableaugetNum()getTotal()Les deux méthodes doivent être exécutées une fois lors de l'initialisation du contrôleur. Puisqu'il n'y a pas d'exécution initiale et queTotalNumetTotalPricene sont pas définis lors de l'initialisation, il y en a deux. la valeur ne sera pas affichée. Et vous avez défini ces deux fonctions en utilisant la méthode de déclaration de variable, donc les appeler avant de les définir seraundefinedgetTotal(), vous avez mal orthographiépricecommepirce, donc$scope.TotalPriceseraNaNSi vous utilisez le filtrenumber: 2, bien sûr,
Lorsque le type de valeuret essayez d'utiliser
=====
.reduceNum()addNum()dansgetTotal()Les deux totaux sont déclarés dans les fonctions correspondantes. Si personne n'appelle ces deux fonctions, comment ces deux totaux peuvent-ils exister ? Votre façon d’écrire est très peu angulaire.
1. Dans la méthode de suppression du produit, la méthode _remove est incorrecte. Corrigez-vous comment supprimer les données d'index spécifiées dans le tableau
2 Dans la méthode getNum|getTotal, il n'y a pas de valeur. aussi des problèmes