Angulars购物车表格按字段排序和删除功能_sortorder用法csdn-优快云博客

先来看看布局中的页面

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

在anjularsjs中数据操作的布局

自己定义的假数据

var arr =
    [{"id": 1234, "name": 'ipad', "price": 34, "count": 1, "check": false},
        {"id": 1244, "name": 'aphone', "price": 64, "count": 5, "check": false},
        {"id": 1334, "name": 'mypad', "price": 44, "count": 2, "check": true},
        {"id": 8234, "name": 'zpad', "price": 84, "count": 9, "check": false},
    ];

具体的操作，写在自己的<script></script>,其中的search的默认查询字段是name字段，可以根据需要进行更改

var myapp = angular.module("myapp",[]);
/*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';
            }
        }
    }
});

下面是自己的布局文件
<style>
    * {
        margin: 0;
        paddding: 0
    }
    /*表格的样式*/
    table {
        border-collapse: collapse;
    }

    td, th {
        width: 200px;
        border: 1px solid gainsboro;
        text-align: center;
        padding: 20px;
    }
    button {
        width: 100px;
        height: 40px;
        background: orange;
        color: white;
        border: 0px;
        border-radius: 5px;
    }

    .search {
        background: ghostwhite;
        border: 1px solid gainsboro;
        border-radius: 5px;
        width: 100%;
        height: 50px;
        line-height: 50px;
        margin-bottom: 10px;
    }

    .search input {
        width: 200px;
        height: 30px;
        color: #999;
        float: left;
        border-radius: 5px;
        margin-left: 20px;
        border: 1px solid gainsboro;
        margin-top: 7px;
    }

    .search button {
        float: right;
        margin-top: 5px;
        margin-right: 10px;
        background: red;
    }

    /*上下三角*/
    .top {
        width: 0;
        height: 0;
        display: inline-block;
        border: 10px solid transparent;
        border-top: 10px solid red;
    }

    .bot {
        width: 0;
        height: 0;
        display: inline-block;
        border: 10px solid transparent;
        border-bottom: 10px solid red;
    }

</style>