AngularJs实现表格点击不同字段排序的功能

主布局里面的代码

<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';
            }
        }
    }
});

界面