- communauté
- Apprendre
- Bibliothèque d'outils
- Loisirs
Maison > Questions et réponses > le corps du texte
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;
}
}]);
PHP中文网2017-05-15 16:58:36
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 :
Votre méthode de suppression est erronée. key == index Après avoir supprimé un élément, l'index du tableau des éléments suivants dans $scope.datas changera (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ès index La méthode de suppression a été réécrite, en utilisant la méthode splice du tableau
getNum() 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 que TotalNum et TotalPrice ne 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 sera undefined
getTotal(), vous avez mal orthographié price comme pirce, donc $scope.TotalPrice sera NaN Si vous utilisez le filtre number: 2, bien sûr,
Lorsque le type de valeur
et essayez d'utiliser =====
reduceNum()addNum() dans getTotal()
某草草2017-05-15 16:58:36
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.
漂亮男人2017-05-15 16:58:36
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