AngularJs实现删除批量删除
来源:互联网 发布:vue.js radio默认选中 编辑:程序博客网 时间:2024/06/11 10:12
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> table{ border-collapse: collapse; } th,td{ padding: 10px; border: 1px solid #000; } </style> <script src="../angular-1.5.5/angular.min.js"></script> <script> var myapp=angular.module("myapp",[]); myapp.controller("myCtrl",function($scope){ $scope.data=[{ "name":"三星", "price":"3000", "has":true, "check":false },{ "name":"huawei", "price":"3000", "has":true, "check":false },{ "name":"苹果", "price":"6000", "has":true, "check":false },{ "name":"小米", "price":"2000", "has":true, "check":false }]; //删除 $scope.del=function(index){ console.log(index); $scope.data.splice(index,1); }; //全选 $scope.checkAll=false; $scope.check2=function(){ if($scope.checkAll==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; } } }; //反着全选 var n=0; $scope.count=function(index){ //console.log(index); if($scope.data[index].check==true){ n++; }else{ n-- } console.log(n); if(n==$scope.data.length){ $scope.checkAll=true; }else{ $scope.checkAll=false; } }; //批量删除的方法 $scope.delAll=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="myCtrl"> <table> <thead> <tr> <th>序号</th> <th><input type="checkbox" ng-model="checkAll" ng-click="check2()">全选</th> <th>品牌</th> <th>价格</th> <th>是否有货</th> <th>操作<button ng-click="delAll()">批量删除</button></th> </tr> </thead> <tbody> <tr ng-repeat="item in data"> <td>{{$index}}</td> <td><input type="checkbox" ng-model="item.check" ng-click="count($index)"></td> <td>{{item.name}}</td> <td>{{item.price}}</td> <td>{{item.has}}</td> <td><button ng-click="del($index)">删除</button></td> </tr> </tbody> </table></body></html>
阅读全文
0 0
- AngularJs实现删除批量删除
- angularjs删除批量删除
- angularJS全选/批量删除
- angularJs批量删除
- angularJS实现查询和批量删除与全部删除
- angularjs简单使用批量删除
- AngularJs实现添加,批量删除,全选,反选等功能
- 使用angularjs实现查询、增加验证、修改、删除、以及批量删除等
- Angularjs实现购物车功能(按钮增减数量、添加、全选、删除、批量删除、结算)
- DataGrid 实现批量删除
- Repeater实现批量删除
- winform 实现批量删除
- Mybatis实现批量删除
- springmvc实现批量删除
- SSH实现批量删除
- springmvc实现批量删除
- angularjs的查找,全选,批量删除
- angularjs中全选以及批量删除
- 解决Hash冲突的几种方法
- 工作记录
- linux课堂笔记
- android jni c++指针传递到java层数据不一致
- Java Applet
- AngularJs实现删除批量删除
- NetWodUtils
- CentOS Docker 安装
- 前端项目配置启动 node +vue +es6
- Windows驱动安装info和调试
- Unity Profiler 性能分析
- C++使用正则表达式
- reids安装
- Spring Boot整合spring-ws开发web service