主佈局裡面的程式碼

<h2>我是購物車</h2>
<div class="search">
    <input type="text" placeholder="輸入關鍵字…" ng-model="serch">
    <button ng-click="moreDel()">批量刪除</button>
</div>
<table>
    <thead>
    <th><input type="checkbox" ng-model="checkAll" ng-click="checkall(checkAll)"></th>
    <th ng-click="sort('id')" >商品編號<span ng-class="getClass('id')"></span></th>
    <th ng-click="sort('name')" >商品名稱<span ng-class="getClass('name')"></span></th>
    <th ng-click="sort('price')">商品價格<span  ng-class="getClass('price')"></span></th>
    <th ng-click="sort('count')">商品庫存<span  ng-class="getClass('count')"></span></th>
    <th ng-click="sort('allmoney')">商品總價<span ng-class="getClass('allmoney')"></span></th>
    <th>資料操作</th>
    </thead>
    <tbody>
    <tr ng-repeat="item in arr | filter:searchFilter | orderBy:sortOrder:reservse">
        <td><input type="checkbox" ng-model="item.check" ng-click="check()"></td>
        <td>{{item.id}}</td>
        <td> {{item.name}}</td>
        <td>{{item.price | currency:"￥"}}</td>
        <td>{{item.count}}</td>
        <td>{{item.count*item.price | currency:"￥"}}</td>
        <td>
            <button ng-click="remove($index)">刪除</button>
        </td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td colspan="7" style="text-align: right;margin-right: 50px">總價: <span>{{allmoney | currency:"￥"}}</span>
            包含運費:<span>{{fire | currency:"￥"}}</span></td>
    </tr>
    </tfoot>
</table>
 angularjs的程式碼

/*views介面的控制*/
myapp.controller("newsCtrl", function ($scope) {
    $scope.arr = arr;
    //算錢的函式
    function money() {
        //計算總價格
        $scope.allmoney = 0;
        for (var i = 0; i < $scope.arr.length; i++) {
            $scope.allmoney += $scope.arr[i].price * $scope.arr[i].count;
        }
        //計算運費
        $scope.fire = 0
        if ($scope.allmoney < 1000) {
            $scope.fire = 10;
        }
        //加運費的總價格
        $scope.allmoney += $scope.fire;
    }

    money();
    //刪除的功能
    $scope.remove = function (index) {
        if (window.confirm("確認刪除嗎")) {
            $scope.arr.splice(index, 1);
            money();
        }
        if ($scope.arr.length == 0) {
            $scope.fire = 0;
            $scope.allmoney = 0;
        }
    }
    //全選按鈕的判斷
    $scope.checkAll = false;
    var checkInput = false;
    //批量刪除的函式
    $scope.moreDel = function () {
        if ($scope.checkAll == false && checkInput == false) {
            alert("請選擇要操作的商品");
        } else {
            if (window.confirm("確認刪除")) {
                for (var i = 0; i < $scope.arr.length; i++) {
                    if ($scope.arr[i].check == true) {
                        $scope.arr.splice(i, 1);
                        i--;
                    }
                }
            }
        }
    }
    //判斷多選框是否選中，預設是不選擇
    $scope.checkall = function (check) {
        if (check) {
            forArr(true);
        } else {
            forArr(false);
        }
    }

    //遍歷陣列的方法
    function forArr(state) {
        for (var i = 0; i < $scope.arr.length; i++) {
            $scope.arr[i].check = state;
        }
    }

    //判斷每個條目前的多選框是否選中
    $scope.check = function () {
        //用來記錄是否全選
        var flag = 0;
        for (var i = 0; i < $scope.arr.length; i++) {
            if ($scope.arr[i].check == true) {
                checkInput = true;
                flag++;
            }
        }
        console.log(flag);
        if (flag == $scope.arr.length) {
            $scope.checkAll = true;
        } else {
            $scope.checkAll = false;
        }
    }
    //按欄位查詢
    $scope.serch = "";
    $scope.searchFilter = function (obj) {
        if ($scope.serch != null) {
            console.log($scope.serch);
            if (obj.name.toLowerCase().indexOf($scope.serch.toLowerCase()) != -1) {
                return true;
            } else {
                return false;
            }
        } else {
            return true;
        }
    }
    //排序的功能
    $scope.sortOrder = "id";
    $scope.reservse = true;
    $scope.sort = function (ziduan) {
        console.log(ziduan);
        if (ziduan == $scope.sortOrder) {
            $scope.reservse = !$scope.reservse;
        } else {
            $scope.reservse = false;
        }
        $scope.sortOrder = ziduan;
    }
    //新增上下三角
    $scope.getClass = function (field) {
        if ($scope.sortOrder == field) {
            if ($scope.reservse == true) {
                return 'top';
            } else {
                return 'bot';
            }
        }
    }
});