社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
angular.js - 購物車中刪除一條數據，總價沒有跟著變動?
大家讲道理
大家讲道理 2017-05-15 17:05:28
0
2
574

在學習用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>
大家讲道理
大家讲道理

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

全部回覆(2)
漂亮男人
漂亮男人2017-05-15 17:07:28 2樓

新增一個函數

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

且del函數改為

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

我必須吐槽下是，你現在的程式碼根本不像在用angular寫東西啊，還是停留在jQuery的層次。 減少dom操作是Angularjs的初衷，但是你直接用.text（）方法給賦值。為什麼不直接把total綁在$scope上，在html上直接{{total}}就可以了啊。
另外，將陣列model2直接放在外面，污染全域變數不可取。也可以將初始化init的程式碼放在controller中，沒必要在html中init。

刪除數組中的元素，總價沒有理由跟著變化，一則總價沒綁定到scope上，再則即使總價這個變量綁定到scope上，也是原始數據類型，你每次操作後，要獲得總價都是要再算一次的。 

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

插一段我的程式碼，還有好多可以優化的，但我要去跑步啦，沒時間改啦。 要用的話，注意引入js，css檔案的路徑

點贊 +0
新增回覆
phpcn_u1582
phpcn_u15822017-05-15 17:07:28 1樓

如果你直接使用jQuery來修改VIEW層或MODEL層數據，那你需要手動進行數據同步。
你可以依需求使用：

$scope.$digest()

或

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

來同步資料。具體可以參考AngularJS的API

點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板