AngularJS网络请求数据、删除、查找、排序

最新推荐文章于 2024-01-11 10:42:06 发布

原创最新推荐文章于 2024-01-11 10:42:06 发布 · 285 阅读

0 ·

CC 4.0 BY-SA版权

AngularJs 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个使用AngularJS实现的数据操作与用户界面展示案例，包括数据获取、表格显示、筛选排序、批量删除等功能。文章通过具体代码展示了如何利用AngularJS框架进行前端开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html ng-app="App">

   <head>
       <meta charset="UTF-8">
       <title></title>
       <script src="../libs/angular.min.js"></script>

       <style>
          #name1{
              border-radius: 20px;
          }
          #name2{
              border-radius: 20px;
          }

       </style>
       <script>
           var App = angular.module("App", []);
           App.controller("DemoCtrl", function($scope, $http) {
               //网络请求数据
               $http({
                   method: "GET",
                   url: "http://result.eolinker.com/TucCTQueffdc1d1aaa3be05d8c62e9bb5d3e8b495f97cca?uri=hybrid"
               }).success(function(data) {
                   $scope.datas = data;
                   console.log(data);
               }).error(function(data) {

               });

               //删除单个数据
               $scope.delete = function(index) {
                   if(confirm("确定要删除么？")) {
                       $scope.datas.splice(index, 1);
                           if($scope.datas.length<=0){
                               $scope.ff = false;
                               $scope.gg = true;
                            }
                   }
                   if($scope.datas.length <= 0) {
                       alert("无可操作数据");

                   }

               }

               //全选反选
               $scope.cheakedAllFun = function() {
                   if($scope.checkAll) {
                       for(var x = 0; x < $scope.datas.length; x++) {
                           $scope.datas[x].state = true

                       }
                   } else {
                       for(var x = 0; x < $scope.datas.length; x++) {
                           $scope.datas[x].state = false;

                       }
                   }
               }
                $scope.ff = true;
               //批量删除
               $scope.delAll = function() {
                   var arrs = [];
                    //循环遍历数组
                   for(var x = 0; x < $scope.datas.length; x++) {
                       if($scope.datas[x].state) {
                           arrs.push($scope.datas[x].name);

                       }

                   }
                   if(arrs.length <= 0) {
                       alert("请您选中需要删除的数据！");

                   } else {
                       for(var x = 0; x < arrs.length; x++) {
                           for(var x2 = 0; x2 < $scope.datas.length; x2++) {
                               if(arrs[x] == $scope.datas[x2].name) {
                                   $scope.datas.splice(x2, 1);

                                    if($scope.datas.length<=0){
                                       $scope.ff = false;
                                       $scope.gg = true;
                                    }
                               }

                           }
                       }
                   }

               }

               //
           });
       </script>
   </head>

   <body ng-controller="DemoCtrl">
       <center ng-show="gg" style="margin-top: 200px;">
           <h1>无数据操作</h1>
       </center>
       <center ng-show="ff">
           <input type="text" placeholder="根据姓名模糊查询" ng-model="SelName" id="name1"/>
           <input type="text" placeholder="根据部门模糊查询" ng-model="Seldepartment" id="name2"/>
           <select ng-model="Or_salary">
               <option>根据薪资排序</option>
               <option value="salary">薪资正序</option>
               <option value="-salary">薪资倒序</option>
           </select>
           <button ng-click="delAll()">批量删除</button>
           <table border="1px" cellspacing="0" width="850px" style="margin-top: 30px;" height="300px">
               <tr align="center">
                   <td><input type="checkbox" ng-model="checkAll" ng-click="cheakedAllFun()" /></td>
                   <td>员工名称</td>
                   <td>员工年龄</td>
                   <td>员工性别</td>
                   <td>员工薪资</td>
                   <td>出生日期</td>
                   <td>部门名称</td>
                   <td>删除</td>
               </tr>

               <tr ng-repeat="x in datas |filter:{name:SelName} |filter:Seldepartment|orderBy:Or_salary" align="center">
                   <td><input type="checkbox" ng-model="x.state" /></td>
                   <td>{{x.name}}</td>
                   <td>{{x.id}}</td>
                   <td>{{x.gender}}</td>
                   <td>{{x.salary|currency:"￥"}}</td>
                   <td>{{x.birthday|date:"yyyy-MM-dd hh:mm:ss"}}</td>
                   <td>{{x.department.name}}</td>
                   <td><button ng-click="delete($index)">删除</button></td>
               </tr>
           </table>
       </center>
   </body>

</html>