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