masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
angular.js - 购物车中删除一条数据，总价没有跟着变动?
大家讲道理
大家讲道理 2017-05-15 17:05:28
0
2
538

在学习用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>
大家讲道理
大家讲道理

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

membalas semua(2)
漂亮男人
漂亮男人2017-05-15 17:07:28 Tingkat 2

Tambah fungsi

function totalPrize(){
    var total=0;
    angular.forEach($scope.todo2,function(item,index){
        total+=item.price*item.total;
    })
    $('.total').text(total);
}

dan fungsi del ditukar kepada 

    $scope.del = function(id) {
//        alert($scope.todo2.length)
        $scope.todo2.splice(id,1)
        totalPrize();
                
    }

Saya perlu mengadu bahawa kod semasa anda tidak kelihatan seperti anda menulis dalam Angular sama sekali, ia masih pada tahap jQuery. Mengurangkan operasi dom ialah niat asal Angularjs, tetapi anda terus menggunakan kaedah .text() untuk menetapkan nilai. Mengapa tidak hanya mengikat jumlah kepada $scope dan hanya {{total}} pada html.
Selain itu, tidak digalakkan untuk meletakkan model tatasusunan secara langsung di luar untuk mencemarkan pembolehubah global. Anda juga boleh meletakkan kod init permulaan dalam pengawal Tidak perlu init dalam html.

Padamkan elemen dalam tatasusunan, dan jumlah harga tidak mempunyai sebab untuk berubah Pertama, jumlah harga tidak terikat kepada skop Tambahan pula, walaupun jumlah pembolehubah harga terikat kepada skop, ia juga merupakan a jenis data primitif Selepas setiap operasi, , anda perlu mengiranya sekali lagi untuk mendapatkan jumlah harga. 

<!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>

Masukkan sekeping kod saya Terdapat banyak perkara yang boleh dioptimumkan, tetapi saya perlu berlari dan tidak mempunyai masa untuk menukarnya. Jika anda ingin menggunakannya, perhatikan laluan mengimport fail js dan css

Suka +0
Tambah Balasan
phpcn_u1582
phpcn_u15822017-05-15 17:07:28 Tingkat 1

Jika anda menggunakan jQuery secara langsung untuk mengubah suai lapisan VIEW atau data lapisan MODEL, anda perlu menyegerakkan data secara manual.
Anda boleh menggunakan mengikut keperluan: 

$scope.$digest()

atau 

$scope.$apply(function(){
    //do sth here.
})

untuk menyegerakkan data. Untuk butiran, sila rujuk API AngularJS

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan