angular实现增删改查，http请求

最新推荐文章于 2022-11-17 14:05:54 发布

w4270724

最新推荐文章于 2022-11-17 14:05:54 发布

阅读量793

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/w4270724/article/details/79446607

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
  <script type="text/javascript">
   angular.module("App", [])
    .controller("Doem", function($scope, $http) {
     //获取数据
     $http({
      method: "GET",
      url: "http://result.eolinker.com/rR1VBtT56a6bb220c10b3d44b65b4787a8aec03c4ec32ce?uri=MonthTest"
     }).success(function(data) {
      $scope.datas = data;
     }).error(function(data) {

     });
     //删除
     $scope.romove = function(index) {
      if(confirm("是否确认删除?")) {
       $scope.datas.splice(index, 1);
       alert("你已删除成功");
      } else {
       alert("你已取消删除！");
      }
     }
     //全选反选
     $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 arr = [];
      for(index in $scope.datas) {
       if($scope.datas[index].state) {
        arr.push($scope.datas[index].name);
       }
      }
      if(arr.length <= 0) {
       alert("请重新选择删除的项目！");
      } else {
       if(window.confirm("确定要删除吗?")) {
        for(index in arr) {
         for(index2 in $scope.datas) {
          if(arr[index] == $scope.datas[index2].name) {
           $scope.datas.splice(index2, 1);
          }
         }
        }
        alert("你已删除成功！");
       } else {
        alert("你已取消删除！");
       }
      }
     }
     var index=0;
     //点击修改按钮
     $scope.xiugai = function(index,x) {
      if(confirm("是否要修改信息")) {
       $scope.ngshow = true;

$scope.updateScore = x.score;

      }
     }
     //修改
     $scope.xiu = function() {

       $scope.datas[index].score = $scope.updateScore;

$scope.ngshow = false;
}

    });
  </script>
  <style>
   thead {
    background-color: #999999;
   }

   tbody tr:nth-child(odd) {
    background-color: #EEEEEE;
   }
  </style>
</head>

<body ng-app="App" ng-controller="Doem">
  <center>
   <input type="text" placeholder="按电影名称模糊查询..." ng-model="chaxun" />
   <input type="button" value="搜索" />
   <select ng-model="order">
    <option>按要求排序</option>
    <option value="time">电影时长正序</option>
    <option value="-time">电影时长倒序</option>
    <option value="price">售价正序</option>
    <option value="-price">售价倒序</option>
    <option value="playTime">上映时间正序</option>
    <option value="-playTime">上映时间倒序</option>
    <option value="score">评分正序</option>
    <option value="-score">评分倒序</option>
   </select>
   <input type="button" value="批量删除" ng-click="delSelect()" />
   <table border="2" cellspacing="0" width="800">
    <thead>
     <tr>
      <td>
       <input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()" />
      </td>
      <td>电影名称</td>
      <td>类型</td>
      <td>时长</td>
      <td>导演</td>
      <td>售价</td>
      <td>上映时间</td>
      <td>评分</td>
      <td>操作</td>
     </tr>
    </thead>
    <tbody>
     <tr ng-repeat="x in datas |orderBy:order | filter:{name:chaxun}">
      <td>
       <input type="checkbox" ng-model="x.state" />
      </td>
      <td>{{x.name}}</td>
      <td>{{x.type}}</td>
      <td>{{x.time}}分钟</td>
      <td>{{x.author}}</td>
      <td>{{x.price |currency:"¥:"}}</td>
      <td>{{x.playTime |date:"yyyy-MM-dd HH:mm:ss"}}</td>
      <td>{{x.score}}</td>
      <td>
       <input type="button" value="修改" ng-click="xiugai($index,x)" />
       <input type="button" value="删除" ng-click="romove($index)" />
      </td>
     </tr>
    </tbody>
   </table>
   <form style="border: 1px solid black; width: 300px;" ng-show="ngshow">
    <h3>评分修改</h3> 评分:
    <input type="text" ng-model="updateScore" /><br /><br />
    <input type="button" value="确定修改" ng-click="xiu()" />
    <br /><br /><br /><br />
   </form>
  </center>
</body>

</html>

w4270724

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular实现增删改查，http请求

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js&
复制链接

扫一扫