Angular实现较为复杂的表格过滤,删除功能示例


Posted in Javascript onDecember 23, 2017

本文实例讲述了Angular实现较为复杂的表格过滤,删除功能。分享给大家供大家参考,具体如下:

先来看看运行效果:

Angular实现较为复杂的表格过滤,删除功能示例

具体代码如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>3water.com 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>

PS:代码中尚有一些功能并不完善,感兴趣的朋友可以自行测试修改完善一下。

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
jQuery UI Dialog控件中的表单无法正常提交的解决方法
Dec 19 Javascript
文本框input聚焦失焦样式实现代码
Oct 12 Javascript
如何使Chrome控制台支持多行js模式——意外发现
Jun 13 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
Jun 15 Javascript
node.js中的fs.truncateSync方法使用说明
Dec 15 Javascript
JS输出空格的简单实现方法
Sep 08 Javascript
JavaScript 实现 Tab 点击切换实例代码
Mar 25 Javascript
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
javascript高级模块化require.js的具体使用方法
Oct 31 Javascript
layui 优化button按钮和弹出框的方法
Aug 15 Javascript
layui 中select下拉change事件失效的解决方法
Sep 20 Javascript
js+html实现点名系统功能
Nov 05 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
Dec 23 #Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
Dec 22 #Javascript
JavaScript中的一些隐式转换和总结(推荐)
Dec 22 #Javascript
原生JS写Ajax的请求函数功能
Dec 22 #Javascript
原生JS控制多个滚动条同步跟随滚动效果
Dec 22 #Javascript
使用vue-cli+webpack搭建vue开发环境的方法
Dec 22 #Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
Dec 22 #Javascript
You might like
PHP防注入安全代码
2008/04/09 PHP
php下HTTP Response中的Chunked编码实现方法
2008/11/19 PHP
php 8小时时间差的解决方法小结
2009/12/22 PHP
php中的静态变量的基本用法
2014/03/20 PHP
PHP代码实现表单数据验证类
2015/07/28 PHP
thinkPHP5.0框架配置格式、加载解析与读取方法
2017/03/17 PHP
List all the Databases on a SQL Server
2007/06/21 Javascript
为jquery的ajaxfileupload增加附加参数的方法
2014/03/04 Javascript
IE6浏览器中window.location.href无效的解决方法
2014/11/20 Javascript
javascript三元运算符用法实例
2015/04/16 Javascript
JavaScript组件开发完整示例
2015/12/15 Javascript
理解javascript正则表达式
2016/03/08 Javascript
ajax在兼容模式下失效的快速解决方法
2016/03/22 Javascript
JavaScript数组去重的几种方法效率测试
2016/10/23 Javascript
浅析script标签中的defer与async属性
2016/11/30 Javascript
vue实现简单表格组件实例详解
2017/04/16 Javascript
vue语法之拼接字符串的示例代码
2017/10/25 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
2018/03/01 Javascript
Node.js 的 GC 机制详解
2019/06/03 Javascript
使用kbone解决Vue项目同时支持小程序问题
2019/11/08 Javascript
[50:34]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python中字典的setdefault()方法教程
2017/02/07 Python
python 含子图的gif生成时内存溢出的方法
2019/07/07 Python
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
20佳惊艳的HTML5应用程序示例分享
2011/05/03 HTML / CSS
网络工程系信息安全技术专业大学生求职信
2013/10/22 职场文书
工业设计专业个人求职信范文
2013/12/28 职场文书
办公室打字员岗位职责
2014/04/16 职场文书
《假如》教学反思
2014/04/17 职场文书
新闻传媒系求职信范文
2014/04/19 职场文书
新手上路标语
2014/06/20 职场文书
新学期红领巾广播稿
2014/10/04 职场文书
2015年财务人员工作总结
2015/04/10 职场文书
一封真诚的自荐信帮你赢得机会
2019/05/07 职场文书
Tomcat starup.bat 脚本实现开机自启动
2022/04/20 Servers
MySQL GTID复制的具体使用
2022/05/20 MySQL