communauté
Apprendre
Bibliothèque d'outils
Outils d'IA
Loisirs
recherche
Français
angulaire.js - Lorsqu'une donnée est supprimée du panier, le prix total ne change pas?
大家讲道理
大家讲道理 2017-05-15 17:05:28
0
2
565

Lorsque j'apprenais à utiliser Angular pour implémenter la fonction de panier, j'ai rencontré un problème :
Lorsque je supprimais un article, le prix total ne changeait pas pendant quelques jours et je n'arrivais pas à le comprendre. S'il vous plaît, aidez-moi. Merci à tous

<!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>
大家讲道理
大家讲道理

光阴似箭催人老，日月如移越少年。

répondre à tous(2)
漂亮男人
漂亮男人2017-05-15 17:07:28 2 plancher

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

Comme +0
Ajouter une réponse
phpcn_u1582
phpcn_u15822017-05-15 17:07:28 1 plancher

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

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal