- communauté
- Apprendre
- Bibliothèque d'outils
- Loisirs
Maison > Questions et réponses > le corps du texte
在学习用angular做购物车功能时，遇到一个问题：
我在删除一条商品时，总价没有跟着变动，折腾了几天，实在琢磨不出，请大家帮忙看看，谢谢大家了
<!doctype html>
<html ng-app="todoApp">
<head>
<meta charset="utf-8"/>
<title>To Do List</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/angular.js"></script>
<script src="js/jquery-1.11.1.js"></script>
<script>
var model2 = [
{name:"shoes",id:1,price:22,total:2},
{name:"T－shirt",id:1,price:12,total:2},
{name:"dress",id:1,price:25,total:2},
]
var todoApp = angular.module("todoApp",[]);
todoApp.controller("ToDoCtrl",function($scope){
$scope.todo2 = model2;
$scope.init = function(){
$scope.allchecked();
}
$scope.checkedone= function(){
var totals = 0;
for(var i=0; i<$scope.todo2.length;i++){
if($scope.todo2[i].status == true){
$scope.allstatus = true
totals += $scope.todo2[i].price * $scope.todo2[i].total;
}else{
$scope.allstatus = false
}
}
$(".total").text(totals)
alert($scope.todo2.length)
}
$scope.allchecked= function(ev){
var totals = 0;
var selected = 0;
$scope.allstatus =true;
for(var i=0; i<$scope.todo2.length;i++){
if($scope.allstatus ==true){
$scope.todo2[i].status = true;
totals += $scope.todo2[i].price * $scope.todo2[i].total;
//selected +=
}else{
$scope.todo2[i].status = false;
}
}
$(".total").text(totals)
}
$scope.del= function(id){
alert( $scope.todo2.length)
$scope.todo2.splice(id,1)
}
})
</script>
<style>
table tr td{border:1px #ccc solid; padding:10px}
</style>
</head>
<body ng-controller="ToDoCtrl" ng-init="init()">
<table>
<tr>
<td> <input type="checkbox" ng-model="allstatus" ng-change="allchecked(allstatus)"/></td>
<td>name</td><td>price</td><td>total</td><td><span class="total"></span></td><td>del</td></tr>
<tr ng-repeat="z in todo2">
<td> <input type="checkbox" ng-model="z.status" ng-change="checkedone()"/></td>
<td>{{z.name}}</td>
<td>{{z.total}}</td>
<td>{{z.price}}</td>
<td>{{z.total * z.price}}</td>
<td><span ng-click="del(z.id)">delted</span></td>
</tr>
</table>
</body>
</html>
漂亮男人2017-05-15 17:07:28
Ajouter une fonction
function totalPrize(){
var total=0;
angular.forEach($scope.todo2,function(item,index){
total+=item.price*item.total;
})
$('.total').text(total);
}et la fonction del est remplacée par
$scope.del = function(id) {
// alert($scope.todo2.length)
$scope.todo2.splice(id,1)
totalPrize();
}Je dois me plaindre que votre code actuel ne donne pas du tout l’impression que vous écrivez en Angular, il est toujours au niveau jQuery. Réduire les opérations dom est l'intention initiale d'Angularjs, mais vous utilisez directement la méthode .text() pour attribuer des valeurs. Pourquoi ne pas simplement lier total à $scope et juste {{total}} en HTML.
De plus, il est déconseillé de placer le tableau model2 directement à l'extérieur pour polluer les variables globales. Vous pouvez également mettre le code d'initialisation dans le contrôleur. Il n'est pas nécessaire de l'initialiser en HTML.
Supprimez les éléments du tableau, et le prix total n'a aucune raison de changer. Premièrement, le prix total n'est pas lié à la portée. De plus, même si la variable de prix total est liée à la portée, c'est également un prix total. type de données primitif. Après chaque opération, vous devez le calculer à nouveau pour obtenir le prix total.
<!doctype html>
<html ng-app="todoApp">
<head>
<meta charset="utf-8" />
<title>To Do List</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<style>
table tr td {
border: 1px #ccc solid;
padding: 10px
}
</style>
</head>
<body ng-controller="ToDoCtrl">
<table>
<tr>
<td> <input type="checkbox" ng-model="allstatus" ng-change="allchecked()" /></td>
<td>name</td>
<td>price</td>
<td>total</td>
<td>{{total}}</td>
<td>del</td>
</tr>
<tr ng-repeat="z in todo2">
<td> <input type="checkbox" ng-model="z.status" ng-change="checkedone($event)" /></td>
<td>{{z.name}}</td>
<td>{{z.total}}</td>
<td>{{z.price}}</td>
<td>{{z.total * z.price}}</td>
<td><span ng-click="del(z.id)">delted</span></td>
</tr>
</table>
<script src="angular.min.js"></script>
<script src="../jquery.js"></script>
<script>
var todoApp = angular.module("todoApp", []);
todoApp.controller("ToDoCtrl", function($scope) {
var model2 = [{
name: "shoes",
id: 1,
price: 22,
total: 2
}, {
name: "T－shirt",
id: 1,
price: 12,
total: 2
}, {
name: "dress",
id: 1,
price: 25,
total: 2
}];
$scope.todo2 = model2;
$scope.total=0;
function init() {
$scope.allstatus=true;
angular.forEach($scope.todo2,function(item){
item.status=true;
$scope.total+=item.price*item.total
})
}
init();
$scope.checkedone = function() {
totalPrize();
$scope.allstatus=checkAll();
}
function checkAll(){
for(var i=0;i<$scope.todo2.length;i++){
if(!$scope.todo2[i].status){
return false;
}
}
return true;
}
$scope.allchecked=function(){
if($scope.allstatus){
for(var i=0;i<$scope.todo2.length;i++){
$scope.todo2[i].status=true;
}
}else{
for(var i=0;i<$scope.todo2.length;i++){
$scope.todo2[i].status=false;
}
}
totalPrize()
}
$scope.del = function(id) {
$scope.todo2.splice(id,1)
totalPrize();
}
function totalPrize(){
$scope.total=0;
angular.forEach($scope.todo2,function(item,index){
if(item.status){
$scope.total+=item.price*item.total;
}
})
}
})
</script>
</body>
</html>Insérez un morceau de mon code. Il y a beaucoup de choses qui peuvent être optimisées, mais je dois y aller et je n'ai pas le temps de le changer. Si vous souhaitez l'utiliser, faites attention au chemin d'importation des fichiers js et css
phpcn_u15822017-05-15 17:07:28
Si vous utilisez jQuery directement pour modifier les données de la couche VIEW ou de la couche MODEL, vous devez synchroniser manuellement les données.
Vous pouvez utiliser selon vos besoins :
$scope.$digest()
ou
$scope.$apply(function(){
//do sth here.
})
pour synchroniser les données. Pour plus de détails, veuillez vous référer à l'API AngularJS