masyarakat
Belajar
Perpustakaan Alatan
Alat AI
Masa lapang
cari
Melayu
angular.js - Apabila sekeping data dipadamkan daripada troli beli-belah, jumlah harga tidak berubah?
大家讲道理
大家讲道理 2017-05-15 17:05:28
0
2
566

Semasa saya belajar menggunakan Angular untuk melaksanakan fungsi troli beli-belah, saya menghadapi masalah:
Apabila saya memadamkan item, jumlah harga saya tidak berubah selama beberapa hari dan tidak dapat memikirkannya keluar. Tolong bantu saya. Terima kasih semua

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