Anaular js请求接口全应用

最新推荐文章于 2024-09-24 22:23:44 发布

幸运的左右

最新推荐文章于 2024-09-24 22:23:44 发布

阅读量2.9k

点赞数

分类专栏： RIA

本文链接：https://blog.youkuaiyun.com/love_xxxooo/article/details/79443173

版权

RIA 专栏收录该内容

7 篇文章

订阅专栏

<!DOCTYPE html>
<html ng-app="App" >
   <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>
           var app=angular.module("App",[]);

           app.controller("Democtrl",function($scope,$http){
               //请求接口数据
               $http({
                   method:"get",
                   url:"http://result.eolinker.com/rR1VBtT56a6bb220c10b3d44b65b4787a8aec03c4ec32ce?   uri=MonthTest",
               }).success(function(data){
                   $scope.radio=data;
                   /*创建数组记录复选框是否被选中*/
                   $scope.flays = [];
                   for(var i = 0;i<data.length;i++){
                       $scope.flays.push(false);
                   }
               }).error(function(){

               });

               /*对电影信息进行删除。当删除电影信息时提示用户是否确定删除，
               当用户确定删除电影信息后提示电影信息是否删除成功.*/
               $scope.remove=function(index){
                   if(confirm("确认删除吗？")){
                       $scope.radio.splice(index,1);
                       alert("删除成功");
                   }else{
                       alert("删除失败");
                   }
               }
               //全选、反选及批量删除。用户可以点选删除也可以全选批量删除。

               $scope.changeChecked = function(index){
                   $scope.flays[index] = !$scope.flays[index];
               }

               $scope.removeChecked = function(){
                   for (var i =0;i<$scope.flays.length;i++) {
                       if($scope.flays[i] == true){
                           $scope.radio.splice(i,1);
                           $scope.flays.splice(i,1);
                           i--;
                       }
                   }
               }


               //用户点击修改操作可对该条数据的评分进行修改。
               $scope.xb = 0;

               /*定义一个变量,操控当前修改div是否显示，默认不显示*/
               $scope.isShow = false;
               /*定义修改的时候,显示div并实现数据的回显*/
               $scope.change = function(index) {
                   /*第二步*/
                   $scope.xb = index;

                   $scope.isShow = true;
                   $scope.newScore = $scope.radio[index].score;

               }
               /*数据回显后,点击修改,把数据修改并展示出来*/
               $scope.updataScore = function() {
                   /*第三步*/
                   index = $scope.xb;
                   $scope.isShow = false;
                   $scope.radio[index].score = $scope.newScore;
               }




           })
       </script>

   </head>
   <body ng-controller="Democtrl">
       
       <input type="text" ng-model="selectName" placeholder="按电影名称模糊查询"/>
       
       <select ng-model="order">
           <option value="time" selected="selected">电影时长</option>
           <option value="price">售价</option>
           <option value="playTime">上映时间</option>
           <option value="score">评分</option>
       </select>
       <button ng-click="removeChecked()">批量删除</button>
       <table border="1" cellpadding="0" cellspacing="0">
          <tr>
              <td><input type="checkbox" /></td>
              <td>编号</td>
               <td>电影名称</td>
               <td>类别</td>
               <td>时长</td>
               <td>导演</td>
               <td>售价</td>
               <td>上映时间</td>
               <td>评分</td>
               <td>操作</td>
          </tr>
          <tr ng-repeat="x in radio|orderBy:order|filter:{name:selectName}">
              <td><input type="checkbox" ng-checked="flays[$index]" ng-click="changeChecked($index)"/></td>
               <td>{{x.id}}</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日"}}</td>
               <td>{{x.score}}</td>
               <td><button ng-click="remove($index)">移除</button><button ng-click="change($index)">修改</button></td>
          </tr>

       </table>
       <div style="border: 1px solid coral;width: 300px;height: 150px;" ng-show="isShow">
          <h2>评分修改</h2>
          <p><span>评分：</span><input type="text" ng-model="newScore"/></p>
          <button ng-click="updataScore()">确认修改</button>
       </div>

   </body>
</html>