社区 学习 工具库 休闲
搜索
简体中文
angular.js - 购物车中删除一条数据，总价没有跟着变动?
大家讲道理
大家讲道理 2017-05-15 17:05:28
0
2
537

在学习用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
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板