angular js 表格搜索批量删除排序

最新推荐文章于 2021-08-11 09:10:49 发布

高唯西

最新推荐文章于 2021-08-11 09:10:49 发布

阅读量186

点赞数

文章标签： angular

本文介绍了一个使用AngularJS实现的数据展示与批量删除功能的示例页面。该页面通过AngularJS控制器加载了一组包含姓名、年龄、电话及注册日期等字段的数据，并实现了基于注册日期的过滤与排序功能。此外，还提供了批量删除所选记录的功能。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
  <script>
   var app=angular.module("myApp",[]);
   app.controller("myCtrl",function($scope){
    $scope.datas=[
    {"name":"张三","age":43,"tel":131123456789,"loginData":"2017-01-22"},
    {"name":"李四","age":23,"tel":132123456789,"loginData":"2018-02-12"},
    {"name":"王五","age":53,"tel":133123456789,"loginData":"2019-03-13"},
    {"name":"赵六","age":73,"tel":134123456789,"loginData":"2020-04-29"}];


    //批量删除
     $scope.deleteAll = function(){
     //获取所有选择的checkbox
     var cks = $("input[type=checkbox]:checked");
     //循环的到所有勾选上的复选框
     for(var i=0;i<cks.length;i++){
      var ck = cks[i];
      var _name = ck.value;//得到要删除的商品的id
      for(var j=0;j<$scope.datas.length;j++){//到数据源中找到和当前id匹配的商品，删除之

       if($scope.datas[j].name == _name){
        $scope.datas.splice(j,1);
        break;
       }
      }

     }
    };
   });
  </script>
  <style>
   table{
    text-align: center;
   }
   table tr:nth-child(even){
    background-color: #CC9966;
   }
   table tr:nth-child(odd){
    background-color: #993366;
   }

  </style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
  <center>
  <input type="text" placeholder="根据注册日期搜索"style="width: 200px; height: 50px;border-radius: 20px;background-color: lightpink;"ng-model="loginDataSelect"/><br /><br /><br />


  <table border="1px" cellpadding="1px" cellspacing="0px"bordercolor="red" width="600px"">
   <tr style="background-color: cadetblue;">
    <td>姓名</td>
    <td>年龄</td>
    <td>电话</td>
    <td>注册日期<select ng-model="DataPaixu"><option></option><option value="loginData">注册日期正序</option><option value="-loginData">注册日期倒序</option></select></td>
    <td></td>
   </tr>
   <tr ng-repeat="d in datas | filter:{loginData:loginDataSelect}|orderBy:DataPaixu">
    <td>{{d.name}}</td>
    <td>{{d.age}}</td>
    <td>{{d.tel}}</td>
    <td>{{d.loginData}}</td>
    <td><input type="checkbox" value="{{d.name}}"/></td>
   </tr>
  </table>
  <br />
  <br />
  <input type="button" value="删除/批量删除"ng-click="deleteAll();" style="background-color: peachpuff;width: 200px;height: 50px;border-radius: 10px;" />   
  <input type="button" οnclick="javascrtpt:window.location.href='手机模拟下一页.html'" value="下一页" style="background-color: powderblue;width: 200px;height: 50px;border-radius: 10px;"/>
  </center>
</body>
</html>