请求外部数据的angularjs

最新推荐文章于 2020-09-23 10:15:29 发布

原创最新推荐文章于 2020-09-23 10:15:29 发布 · 358 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个使用AngularJS实现的数据表格示例，展示了如何通过AngularJS进行数据加载、模糊查询、排序及批量删除等功能，并提供了完整的代码实现。

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="../libs/angular.js"></script>
  <script src="../libs/jquery-1.11.0.min.js"></script>
  <script>
   var App=angular.module("myApp",[]);
   App.controller("myCtrl",function($scope,$http){
    $http({
     method:"GET",
     url:"http://result.eolinker.com/TucCTQueffdc1d1aaa3be05d8c62e9bb5d3e8b495f97cca?uri=hybrid"
    }).success(function(data){
     $scope.datas = data;
    }).error(function(data){

    });
    //删除

    $scope.remove = function(index) {
     if(confirm("删除吗?")) {
        if($scope.datas==""){
               alter("无操作数据");

           }
            $scope.datas.splice(index, 1);
     }
    }
                //全选、全不选

    $scope.selectAll = false;
    $scope.selectAllFun = function() {
     if($scope.selectAll) {
      for(index in $scope.datas) {
       $scope.datas[index].state = true;
      }
     } else {
      for(index in $scope.datas) {
       $scope.datas[index].state = false;
      }
     }
    }

     //批量删除

    $scope.delSelect = function() {
     var selArr = [];
     for(index in $scope.datas) {
      if($scope.datas[index].state) {
       selArr.push($scope.datas[index].name)
      }
     }
     if(selArr.length <= 0) {
      alert("请先选择");
     } else {
      if(window.confirm("确定要删除吗？")) {
       for(index1 in selArr) {
        for(index2 in $scope.datas) {
         if(selArr[index1] == $scope.datas[index2].name) {
          $scope.datas.splice(index2, 1);
         }
        }
       }
      } else {      }
     }
    }

//反选
//
//    $scope.checkSelAll = function() {
//     var flag = false;
//     for(index in $scope.datas) {
//      if(!$scope.datas[index].
//) {
//
//       flag = true;
//      }
//     }
//     if(flag) {
//      $scope.selectAll = false;
//     } else {
//      $scope.selectAll = true;
//     }
//    }
   });
  </script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
  <input type="text" ng-model="search" placeholder="根据姓名模糊查询..." />  
  <input type="text" placeholder="根据部门模糊查询..." />  
    <select ng-model="orderSel">
              <option value="">根据薪资排序</option>
              <option value="id">--年龄正序--</option>
              <option value="-id">--年龄逆序--</option>
              <option value="birthday">--价格正序--</option>
              <option value="-birthday">--价格逆序--</option>
           </select>
               <button ng-click="delSelect()">批量删除</button>
  <table border="1px solid blue;" cellpadding="10" cellspacing="0">>
   <thead>
    <th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()" /></th>
    <th>员工姓名</th>
    <th>员工年龄</th>
    <th>员工性别</th>
    <th>员工薪资</th>
    <th>出生日期</th>
    <th>部门名称</th>
    <th>删除</th>
   </thead>
   <tbody>
      <tr ng-repeat="x in datas | filter:{name:search} | orderBy:orderSel">
     <td><input type="checkbox" ng-model="x.state" ng-click="checkSelAll()" /></td>
     <td>{{x.name}}</td>
     <td>{{x.id}}</td>
     <td>{{x.gender}}</td>
     <td>{{x.salary}}</td>
     <td>{{x.birthday | date:"yyyy-MM-dd hh:mm:ss"}}</td>
     <td>{{x.department.name}}</td>
     <td><input type="button" value="删除" ng-click="remove($index)" /></td>
      </tr>
   </tbody>
  </table>
</body>
</html>