<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> table{ border-collapse: collapse; margin-top: 10px; } th,td{ border: 1px solid #000000; text-align: center; width: 80px; height: 35px; } .color{ color: red; } </style> <!--引入angular.min.js--> <script src="../angular-1.5.5/angular.min.js"></script> <script> /*定义数据*/ var data=[ {bh:1234,name:'ipad',price:3400.00,num:10,check:false}, {bh:1244,name:'aphone',price:6400.00,check:false}, {bh:1334,name:'mypad',price:4400.00,check:false}, {bh:8234,name:'zpad',price:8400.00,check:false} ]; var app=angular.module("myapp",[]); app.controller("myContrl",function ($scope) { $scope.data=data; /*排序功能实现类*/ /*默认按照name排序*/ $scope.sort="name"; /*当name为false时是倒叙*/ $scope.active=false; /*当点相对应的字段时执行此方法*/ $scope.sortfun=function (colnum) { console.log(colnum); /*判断这两个字段是否相等*/ if($scope.sort==colnum){ /*两个一样是样它自己不等于它自己*/ $scope.active=!$scope.active; }else { $scope.active=false; } /*把字段的名字负值给$scope.sort*/ $scope.sort=colnum; }; /*添加一个类的方法改变字体的颜色*/ $scope.getclass=function (colnum) { if($scope.sort==colnum){ return "color"; } }; /*实现全选和反选*/ $scope.checked=false; /*判断要选的按钮是否选中*/ $scope.checkAll=function () { if ($scope.checked==true){ for (var i=0;i<$scope.data.length;i++){ $scope.data[i].check=true; } }else { for (var i=0;i<$scope.data.length;i++){ $scope.data[i].check=false; } } }; /*实现批量删除*/ $scope.deleteAll=function () { for (var i=0;i<$scope.data.length;i++){ /*判断选中时*/ if($scope.data[i].check==true){ /*删除当前行*/ $scope.data.splice(i,1); i--; } } } }); </script> </head> <body ng-app="myapp" ng-controller="myContrl"> <input type="text" placeholder="请输入关键字..." ng-model="ss" > <button ng-click="deleteAll()">批量删除</button> <table ng-show="show"> <thead> <tr> <th><input type="checkbox" ng-model="checked" ng-click="checkAll()"></th> <th ng-click="sortfun('bh')" ng-class="getclass('bh')">商品编号</th> <th ng-click="sortfun('name')" ng-class="getclass('name')">商品名称</th> <th ng-click="sortfun('price')" ng-class="getclass('price')">商品价格</th> <th ng-click="sortfun('num')" ng-class="getclass('num')">商品库存</th> <th>数据操作</th> </tr> </thead> <tbody> <!--ng-repeat遍历数据, filter 模糊查询过滤 , orderBy 排序--> <tr ng-repeat="item in data|filter:ss|orderBy:sort:active"> <td><input type="checkbox" ng-model="item.check" ></td> <td>{{item.bh}}</td> <td>{{item.name}}</td> <td>{{item.price|currency:'¥'}}</td> <td>{{item.num}}</td> <td><button ng-click="remove($index)">删除</button></td> </tr> </tbody> </table> </body> </html>