$http获取地址的增删改查

<!DOCTYPE html>
<html ng-app="app">
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   table tr:nth-child(even) {
    background-color: lightgray;
   }
   
   tr button {
    width: 30px;
   }
  </style>
  <script src="js/angular.min.js"></script>
  <script src="js/jquery-3.2.1.min.js"></script>
  <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
  <script>
   var app = angular.module("app",[]);
   app.controller("con",function($scope,$http){
    $http({
     method:"get",
     url:"http://result.eolinker.com/rR1VBtT56a6bb220c10b3d44b65b4787a8aec03c4ec32ce?uri=MonthTest"
    }).success(function(data){    //data 服务器返回请求数据 
          $scope.stus = data;
            }).error(function(data){
               //请求失败了
               alert("请求失败");
             });
    
    $scope.del = function(e){
     for(var i in $scope.stus){
      if($scope.stus[i].name ==e){
       if(confirm("确认删除吗?")) {
        $scope.stus.splice(i, 1);
        i--;
       }
      }
     }
    }
    
    
    //ck全选
    $scope.ckAll = function(){
     for(var i=0; i<$scope.stus.length;i++){
      $scope.stus[i].ck = $scope.xuan;
     }
    }
    $scope.empty = function(){
     var sh=0;
     for(var i = 0; i < $scope.stus.length; i++) { 
                        if($scope.stus[i].ck) { 
                           $scope.stus.splice(i, 1);
                           sh++;
                           i--;
                          }
                       }
    }
    
    $scope.xiu = function(name){
     for(var i in $scope.stus){
                if($scope.stus[i].name == name){
                  $scope. name2 = $scope.stus[i].name;
                 $scope.score2 = $scope.stus[i].score;
                }
                
               }
               $scope.fsf = true;
    }
    
    $scope.xiu2 = function(){
     var n_name = $scope.name2;
     var n_score = $scope.score2;
     for(var i = 0; i < $scope.stus.length; i++){
                        if($scope.stus[i].name==n_name){
                         $scope.stus[i].score = n_score;
     }}
     $scope.fsf=false;
    }
   });
  </script>
 </head>
 <body  ng-controller="con">
  <div>
  模糊查询:<input  ng-model="mohu"/>
  <select ng-model="paiscore">
   <option value="">按要求排序</option>
   <option value="-score">按评分倒序</option>
   <option value="+score">按评分正序</option>
  </select>
  <button ng-click="empty()">批量删除</button>
  </div>
  <table width="900" border="1" cellspacing="0">
   <tr style="background-color: lightslategray;">
    <td><input type="checkbox" ng-model="xuan" ng-click="ckAll()"/></td>
    <td>电影名称</td>
    <td>类型</td>
    <td>时长</td>
    <td>导演</td>
    <td>售价</td>
    <td>上映时间</td>
    <td>评分</td>
    <td>操作</td>
   </tr>
   <tr ng-repeat="a in stus| filter:{name:mohu}|orderBy:paiscore">
    <td><input type="checkbox" ng-model="a.ck"/></td>
    <td>{{a.name}}</td>
    <td>{{a.type}}</td>
    <td>{{a.time| date:"yyyy-MM-dd HH:mm:ss"}}</td>
    <td>{{a.author}}</td>
    <td>{{a.price|  currency:"¥"}}</td>
    <td>{{a.playTime}}</td>
    <td>{{a.score}}</td>
    <td><button ng-click="del(a.name)" style="width: 70px;">删除</button>
     <button ng-click="xiu(a.name)" style="width: 70px;">修改</button>
    </td> 
   </tr>
  </table>
  <div style="width: 180px;border: 1px solid #000000; height: 140px; margin-left: 490px;" ng-show="fsf"> 
                <div style="margin: 0 auto;"> 
                    <h2 style="margin-left: 30px;">评分修改</h2>
          <input input type="hidden" value="" ng-model="name2" /> 
                    评分<input placeholder="评分" ng-model="score2" /><br /> 
                <button ng-click="xiu2()" style="width: 100px;">修改</button> 
            </div> 
            </div>
 </body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值