| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>标题</title> | |
| <style> | |
| .non{ | |
| display: none; | |
| } | |
| .font{ | |
| color:red; | |
| } | |
| </style> | |
| <script src="angular-1.5.5/angular.min.js"></script> | |
| <script> | |
| var myapp = angular.module("myapp",[]); | |
| myapp.controller("myCtrl",function ($scope) { | |
| $scope.orderName = "index";//排序的字段 | |
| $scope.order = false;//排序的方向 | |
| $scope.allCheck = false;//全部选中框 | |
| $scope.isCheck = false;//单选框 | |
| $scope.search = "";//模糊查询 | |
| $scope.items = [ | |
| { | |
| index:1234, | |
| name:"ipad", | |
| price:3400, | |
| num:10, | |
| check:false | |
| }, | |
| { | |
| index:1244, | |
| name:"aphone", | |
| price:6400, | |
| num:100, | |
| check:false | |
| }, | |
| { | |
| index:1334, | |
| name:"mypad", | |
| price:4400, | |
| num:20, | |
| check:false | |
| }, | |
| { | |
| index:8234, | |
| name:"zpad", | |
| price:6400, | |
| num:130, | |
| check:false | |
| } | |
| ]; | |
| //删除单个 | |
| $scope.delete = function (index) { | |
| var isDelete = confirm("确定删除？"); | |
| if(isDelete){ | |
| for(var i = 0; i<$scope.items.length; i++){ | |
| if ($scope.items[i].index == index){ | |
| $scope.items.splice(i,1); | |
| } | |
| } | |
| } | |
| }; | |
| //删除全部 | |
| $scope.checkAll = function () { | |
| if($scope.allCheck == true){ | |
| for(var i = 0; i<$scope.items.length; i++){ | |
| $scope.items[i].check = true; | |
| } | |
| }else{ | |
| for(var i = 0; i<$scope.items.length; i++){ | |
| $scope.items[i].check = false; | |
| } | |
| } | |
| }; | |
| //每个复选框 | |
| $scope.itemCheck = function () { | |
| var flag = 0; | |
| for(var i = 0; i<$scope.items.length; i++){ | |
| console.log($scope.items[i].check); | |
| if($scope.items[i].check == true){ | |
| flag ++; | |
| } | |
| } | |
| if(flag == $scope.items.length){ | |
| $scope.allCheck = true; | |
| }else{ | |
| $scope.allCheck = false; | |
| } | |
| }; | |
| //删除全部 | |
| $scope.deleteAll = function () { | |
| var is = confirm("是否删除"); | |
| if (is == true){ | |
| var arr = []; | |
| for(var i = 0; i<$scope.items.length; i++){ | |
| if($scope.items[i].check == false){ | |
| arr.push($scope.items[i]); | |
| } | |
| } | |
| $scope.items = arr; | |
| } | |
| }; | |
| //添加类 | |
| $scope.addClass = function () { | |
| if($scope.items == ""){ | |
| return "non"; | |
| } | |
| }; | |
| //改变排序方向和字段 | |
| $scope.changeOrder = function (orderName) { | |
| if($scope.orderName == orderName){ | |
| $scope.order = !$scope.order; | |
| } | |
| $scope.orderName = orderName; | |
| }; | |
| //变色 | |
| $scope.addClas = function (orderName) { | |
| if (orderName == $scope.orderName){ | |
| return "font"; | |
| } | |
| } | |
| }); | |
| </script> | |
| </head> | |
| <body ng-app="myapp" ng-controller="myCtrl" ng-class="addClass()"> | |
| <input type="text" placeholder="输入关键字...." ng-model="search"> | |
| <button style="background: red;" ng-click="deleteAll()">批量删除</button> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th><input type="checkbox" ng-model="allCheck" ng-click="checkAll()"></th> | |
| <th ng-click="changeOrder('index')" ng-class="addClas('index')">商品编号</th> | |
| <th ng-click="changeOrder('name')" ng-class="addClas('name')">商品名称</th> | |
| <th ng-click="changeOrder('price')" ng-class="addClas('price')">商品价格</th> | |
| <th ng-click="changeOrder('num')" ng-class="addClas('num')">商品库存</th> | |
| <th>数据操作</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr ng-repeat="item in items | filter:search | orderBy:orderName:order"> | |
| <td><input type="checkbox" ng-model="item.check" ng-click="itemCheck()"></td> | |
| <td>{{item.index}}</td> | |
| <td>{{item.name}}</td> | |
| <td>{{item.price | currency:"￥"}}</td> | |
| <td>{{item.num}}</td> | |
| <td><button ng-click="delete(item.index)">删除</button></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </body> | |
| </html> |
扫一扫
01-06
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
