


Detailed example of Angular implementing more complex table filtering and deletion functions
This article mainly introduces Angular's implementation of more complex table filtering and deletion functions, and analyzes AngularJS's related operating techniques for table sorting, query matching, dynamic modification of page element attributes, etc. in the form of examples. Friends in need can refer to No Hope Can help everyone.
The example in this article describes Angular's implementation of more complex table filtering and deletion functions. Share it with everyone for your reference, the details are as follows:
Let’s take a look at the running effect first:
The specific code is as follows:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>www.jb51.net Angular过滤、删除</title> <style> table{ border: 1px solid black; width: 800px; } td , th{ border: 1px solid black; text-align: center; } th{ background: #767674; } .d1{ width: 50%; margin: 0 auto; } .d2{ margin-top: 10px; } .btn{ background: green; color: white; } .btn1{ background: red; color: white; } tr:nth-child(2n){ background-color: gainsboro; } </style> <script src="angular.min.js"></script> <script type="text/javascript" src="jquery-1.9.1.min.js" ></script> <script> angular.module("MyApp",[]) .controller("democ",function($scope,$filter){ $scope.isc = false; $scope.arrs = [{ checked:false, id:7, name:"OPPO R9s", user:"赵云", tel:15777777777, price:4999, city:"北京", time:new Date('03-09 10:00'), sta:"已发货" }, { checked:false, id:12, name:"VIVO X20", user:"关羽", tel:15333333333, price:2998, city:"上海", time:new Date('08-22 10:00'), sta:"已发货" }, { checked:false, id:1, name:"iPhone 8 Plus", user:"曹操", tel:15111111111, price:7588, city:"北京", time:new Date('09-04 10:00'), sta:"已发货" }, { checked:false, id:11, name:"小*Note5", user:"黄忠", tel:13222222222, price:699, city:"重庆", time:new Date('02-28 10:00'), sta:"发货" }, { checked:false, id:1, name:"小*Mix2", user:"黄盖", tel:13111111111, price:3299, city:"北京", time:new Date('03-015 10:00'), sta:"发货" }]; $scope.arr = $scope.arrs; $scope.seluser = function(){ $scope.arr = []; var val = $scope.reg_user; var f = $filter("filter"); $scope.arr = f($scope.arrs,{"user":val}); } $scope.seltel = function(){ $scope.arr = []; var val = $scope.reg_tel; var f = $filter("filter"); $scope.arr = f($scope.arrs,{"tel":val}); } $scope.selsta = function(){ $scope.arr = []; var val = $scope.reg_sta; var f = $filter("filter"); $scope.arr = f($scope.arrs,{"sta":val}); } $scope.ckAll = function(){ var ck = $scope.sta_ck; for(var i=0; i<$scope.arrs.length; i++){ $scope.arrs[i].checked = ck; } } $scope.del = function(th){ $scope.arrs.splice(th,1); } $scope.delAll = function(){ for(var i=0; i<$scope.arrs.length; i++){ if($scope.arrs[i].checked==true){ $scope.arrs.splice(i,1); i--; } } } $scope.add = function(){ var d=new Date(); $scope.arrs.push({ checked:false, id:$scope.a_id, name:$scope.a_name, user:$scope.a_user, tel:$scope.a_tel, price:$scope.a_price, city:$scope.a_city, time:d, sta:"发货" }); $scope.arr = $scope.arrs; $scope.isc = false; } }); </script> </head> <body ng-app="MyApp" ng-controller="democ"> <p class="d1"> <p> <input type="text" placeholder="用户名搜索" ng-change="seluser()" ng-model="reg_user"/> <input type="text" placeholder="手机号搜索" ng-change="seltel()" ng-model="reg_tel"/> <select> <option>选择城市</option> <option>北京</option> <option>上海</option> <option>广州</option> </select> <select ng-change="selsta()" ng-model="reg_sta"> <option value="">选择状态</option> <option value="发货">发货</option> <option value="已发货">已发货</option> </select> <select ng-model="selid"> <option value="">--请选择--</option> <option value="id">ID正序</option> <option value="-id">ID倒叙</option> </select> <select ng-model="selmonth"> <option value="">开始月份</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select> <select ng-model="lastmonth"> <option value="">结束月份</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select> </p> <p class="d2"> <input type="button" value="新增订单" class="btn" ng-click="isc=true"/> <input type="button" value="批量发货" class="btn"/> <input type="button" value="批量删除" class="btn1" ng-click="delAll()"/> 敏感词:米(商品名)->替换成* </p> <p> <table cellpadding="0" cellspacing="0"> <tr> <th><input type="checkbox" ng-change="ckAll()" ng-model="sta_ck"/></th> <th>ID</th> <th>商品名</th> <th>用户名</th> <th>手机号</th> <th>价格</th> <th>城市</th> <th>下单时间</th> <th>状态</th> <th>操作</th> </tr> <tr ng-repeat="a in arr|orderBy : selid | filter:{time:selmonth} | filter:{time:lastmonth}"> <td><input type="checkbox" ng-model="a.checked"/></td> <td>{{a.id}}</td> <td>{{a.name}}</td> <td>{{a.user}}</td> <td>{{a.tel}}</td> <td>{{a.price|currency : '¥'}}</td> <td>{{a.city}}</td> <td>{{a.time|date : 'MM-HH hh:dd:ss'}}</td> <td> <span ng-show="a.sta=='已发货'">{{a.sta}}</span> <span ng-show="a.sta=='发货'"><a href="#" rel="external nofollow" ng-click="a.sta='已发货'">{{a.sta}}</a></span> </td> <td><input type="button" value="删除" ng-click="del(this)"/></td> </tr> </table> </p> <p ng-show="isc"> I D:<input type="text" ng-model="a_id"/><br /> 商品名:<input type="text" ng-model="a_name"/><br /> 用户名:<input type="text" ng-model="a_user"/><br /> 手机号:<input type="text" ng-model="a_tel"/><br /> 价 值:<input type="text" ng-model="a_price"/><br /> 城 市:<input type="text" ng-model="a_city"/><br /> <input type="button" value="保存" ng-click="add()"/> </p> </p> </body> </html>
PS: There are still some functions in the code that are not perfect. Interested friends can test and modify them by themselves.
Related recommendations:
Example detailed explanation of AngularJS traversal to obtain array elements
Detailed explanation of Angular's implementation of form validation function
The above is the detailed content of Detailed example of Angular implementing more complex table filtering and deletion functions. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

How to implement dual WeChat login on Huawei mobile phones?

How to install Angular on Ubuntu 24.04

Use Java to write code to implement love animation

How to implement the WeChat clone function on Huawei mobile phones

PHP Programming Guide: Methods to Implement Fibonacci Sequence

Angular components and their display properties: understanding non-block default values

Master how Golang enables game development possibilities

Development suggestions: How to use the ThinkPHP framework to implement asynchronous tasks
