扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > html >Angular如何实现较为复杂的表格过滤，删除功能
  • 510

0
分享到

Angular如何实现较为复杂的表格过滤，删除功能

2024-04-02 19:04:59 510人浏览 泡泡鱼
摘要

这篇文章主要介绍了angular如何实现较为复杂的表格过滤，删除功能，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。具体如下：先来看看运行效果

这篇文章主要介绍了angular如何实现较为复杂的表格过滤，删除功能，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

具体如下：

先来看看运行效果：

Angular如何实现较为复杂的表格过滤，删除功能

具体代码如下：

<!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">
    <div class="d1">
      <div>
        <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>
      </div>
      <div 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()"/>
        敏感词:米(商品名)->替换成*
      </div>
      <div>
        <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>
      </div>
      <div 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()"/>
      </div>
    </div>
  </body>
</html>

感谢你能够认真阅读完这篇文章，希望小编分享的“Angular如何实现较为复杂的表格过滤，删除功能”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网html频道，更多相关知识等着你来学习!

--结束END--

本文标题: Angular如何实现较为复杂的表格过滤，删除功能

本文链接: https://lsjlt.com/news/72308.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Angular如何实现较为复杂的表格过滤，删除功能
    这篇文章主要介绍了Angular如何实现较为复杂的表格过滤，删除功能，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。具体如下：先来看看运行效果...
    99+
    2024-04-02
  • Angular如何实现搜索、过滤、批量删除、添加、表单验证功能
    这篇文章将为大家详细讲解有关Angular如何实现搜索、过滤、批量删除、添加、表单验证功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。具体代码如下所示；<!DOC...
    99+
    2024-04-02
  • jQuery如何实现的简单动态添加、删除表格功能
    这篇文章将为大家详细讲解有关jQuery如何实现的简单动态添加、删除表格功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。先来看看运行效果：具体代码如下：<!DOC...
    99+
    2024-04-02
  • Angular如何实现的日程表功能
    小编给大家分享一下Angular如何实现的日程表功能，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！具体如下：先来看看运行效果：具...
    99+
    2024-04-02
  • Angular如何实现内置过滤器orderBy排序与模糊查询功能
    小编给大家分享一下Angular如何实现内置过滤器orderBy排序与模糊查询功能，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！...
    99+
    2024-04-02
  • jQuery如何实现节点追加、替换、删除、复制功能
    小编给大家分享一下jQuery如何实现节点追加、替换、删除、复制功能，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！一、追加节点分为父子和兄弟节点的追加。每个追加节点的方法又分主动追加和被动...
    99+
    2024-04-02
  • flutter如何实现带删除动画的listview功能
    这篇文章将为大家详细讲解有关flutter如何实现带删除动画的listview功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。个人开发app中，需要开发一个带有删除功能的ListView效果如下需求动画...
    99+
    2023-06-15
  • layui数据表格复选框如何实现单选功能
    这篇文章将为大家详细讲解有关layui数据表格复选框如何实现单选功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。如下所示：//点击选中(单选) //单击行勾选check...
    99+
    2024-04-02
  • js自定义trim函数如何实现删除两端空格功能
    这篇文章主要为大家展示了“js自定义trim函数如何实现删除两端空格功能”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“js自定义trim函数如何实现删除两端空格...
    99+
    2024-04-02
  • jquery如何实现删除元素前的提示功能
    这篇文章主要介绍了jquery如何实现删除元素前的提示功能的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇jquery如何实现删除元素前的提示功能文章都会有所收获，下面我们一起来看看吧。手动添加确认窗口最简单的方...
    99+
    2023-07-05
  • SpringBoot基于过滤器和内存如何实现重复请求拦截功能
    这篇文章主要介绍了SpringBoot基于过滤器和内存如何实现重复请求拦截功能的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇SpringBoot基于过滤器和内存如何实现重复请求拦截功能文章都会有所收获，下面我们...
    99+
    2023-07-05
  • 如何使用Vue的过滤器功能来实现模糊搜索
    Vue.js是一款流行的JavaScript框架之一，它提供了许多有用的功能，包括Vue的过滤器。在本文中，我们将介绍如何使用Vue的过滤器功能来实现模糊搜索。在Vue.js中，过滤器是用于转换文本的函数，常常用于格式化文本输出。在本例中，...
    99+
    2023-05-14
  • Java如何实现顺序表的增删查改功能
    这篇文章主要介绍Java如何实现顺序表的增删查改功能，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！创建顺序表在java语言中要实现顺序表，首先创建一个类，因为顺序表本身就像数组，所以我们这里定义一个int类型的数组和...
    99+
    2023-06-14
  • 如何使用Bootstrap-Table实现满意的表格功能
    这篇文章将为大家详细讲解有关如何使用Bootstrap-Table实现满意的表格功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。Bootstrap是什么Bootstrap是目前最受欢迎的前端框架，它是基...
    99+
    2023-06-14
  • 如何使用批处理实现注册表危险组件删除功能
    这篇文章主要介绍如何使用批处理实现注册表危险组件删除功能，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！把这个存成bat文件运行，保你服务器最基本的安全！ 代码如下::: 注册表相关设定 reg delete HKEY...
    99+
    2023-06-08
  • 如何使用PHP实现表格的直接编辑功能
    随着互联网技术的快速发展，Web 应用的应用范围越来越广泛。Web 应用提供的数据展示和数据收集功能对许多企业和个人的运营和管理起到了重要的作用。表格数据的展示和收集是 Web 应用中最常见的功能之一。在这个过程中，编辑表格数据的功能是必不...
    99+
    2023-05-14
  • 如何使用MongoDB实现数据的增加、修改、删除功能
    如何使用MongoDB实现数据的增加、修改、删除功能MongoDB是一种流行的开源NoSQL数据库，具有高性能、可伸缩性和灵活性。在使用MongoDB存储数据时，我们经常需要对数据进行增加、修改和删除操作。以下是使用MongoDB实现这些功...
    99+
    2023-10-22
    删除 MongoDB 修改 增加
  • 微信小程序项目中如何实现点赞、删除列表、分享功能
    这篇文章给大家分享的是有关微信小程序项目中如何实现点赞、删除列表、分享功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。小程序点赞功能思路：在后台没有给你接口自己模拟数据data...
    99+
    2024-04-02
  • ASP框架教程：如何用最简单的方式实现复杂的功能？
    ASP框架是一种非常流行的Web应用程序框架，它可以帮助开发者快速构建Web应用程序并实现复杂的功能。ASP框架不仅可以节省开发时间，还可以提高应用程序的性能和可维护性。在本教程中，我们将介绍如何使用最简单的方式实现复杂的功能。 一、AS...
    99+
    2023-08-05
    框架 教程 学习笔记
  • 如何使用jQuery实现一个类似GridView编辑,更新,取消和删除的功能
    这篇文章主要为大家展示了“如何使用jQuery实现一个类似GridView编辑,更新,取消和删除的功能”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用jQ...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作