angular.js - 购物车中删除一条数据，总价没有跟着变动?-PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

angular.js - 购物车中删除一条数据，总价没有跟着变动?

大家讲道理 2017-05-15 17:05:28

[AngularJS讨论组]

800

在学习用angular做购物车功能时，遇到一个问题：
我在删除一条商品时，总价没有跟着变动，折腾了几天，实在琢磨不出，请大家帮忙看看，谢谢大家了




    
    To Do List
    
    
    
    
    




    
        
             
            name price total del
        
              
            {{z.name}}
            {{z.total}}
            {{z.price}}
            {{z.total * z.price}}
            delted

大家讲道理

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

全部回复(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_u15822017-05-15 17:07:28 1楼

如果你直接使用jQuery来修改VIEW层或者MODEL层数据，那你需要手动进行数据同步。
你可以根据需要使用：

$scope.$digest()

或者

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

来同步数据。具体可以参考AngularJS的API

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>

	name	price	total		del
	{{z.name}}	{{z.total}}	{{z.price}}	{{z.total * z.price}}	delted