电影-CSDN博客

本文链接：https://blog.csdn.net/tianpenggg/article/details/79722625

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script src="js/angular.min.js"></script>
       <script>
           var app= angular.module("gaoynapp",[]); //gaoynapp，在视图中指明angular的作用范围
           app.controller("ctrl",function($scope,$http){ //控制器ctrl：数据的定义和数据的增删改查操作都是写在控制器
               //从网站获取数据
               $scope.stus=[];

               $http.get("http://result.eolinker.com/lKgJQ8Zec38423e5603b8e055d1193a8127c0c060bb1b55?uri=test1")
               .success(function(aa){ //访问网站的数据成功后，网頁上的数据内容---赋值给函数的变量aa
                   $scope.stus=aa; //把从网站上获取的数据赋值给数组stus
               })

               //定义修改的方法
               $scope.update=function(info){ //函数中或获得修改按钮对应对象
                   //弹框
                   var aa= prompt("请修改评分",info.score); //在框中显示的默认值---》可以被修改---》修改后的值--》aa接受修改后的值
                   //判断是否点击了确定按钮
                   if(aa!=undefined){
                       info.score=aa; //把弹出框新的添加的值---》赋值给修改按钮对应对象
                   }

               }

               //定义删除方法
               $scope.del=function(name){
                   for(var i=0;i<$scope.stus.length;i++){
                       //每次都判断当前对象的名字，是否是领导指定的名字
                       if($scope.stus[i].name==name){
                           //把当前位置的对象进行删除
                           $scope.stus.splice(i,1);
                       }
                   }
               }

               //全选和全不选

               $scope.ckall=function(){
                   //获取领导的当前状态
                   var gf_flag=$scope.flag;
                   //想要让视图上所有的复选框处于选中或者不选中---》改变数据源
                   for(var i=0;i<$scope.stus.length;i++){
                       $scope.stus[i].ck=gf_flag;//ck--->数组中每个对象的ck

                   }
               }

               //批量删除的方法
               $scope.delall=function(){
                   //对象的标记状态ck状态值true
                   for(var i=0;i<$scope.stus.length;i++){
                       //视图复选框是否被勾选
                       if($scope.stus[i].ck==true){
                           $scope.stus.splice(i,1);
                           //保证连续删除
                           i--;
                       }
                   }
               }


           })
       </script>
   </head>
   <body ng-app="gaoynapp"   ng-controller="ctrl" >

       <input ng-model="sname" placeholder="请输入查询到电影名称" /> <button ng-click="bname=sname">查询</button> 
       <select ng-model="px">
           <option value="">请选择。。。</option>
           <option value="time">根据时长升序排列</option>
           <option value="-time">根据时长降序排列</option>
           <option value="price">根据售价升序排列</option>
           <option value="-price">根据售价降序排列</option>

       </select>
       <button ng-click="delall()">批量删除</button>
       <table border="1px">
           <tr>
               <th><input type="checkbox" ng-click="ckall()" ng-model="flag" /></th>
               <td>电影名称</td>
               <td>类别</td>
               <td>时常</td>
               <td>导演</td>
               <td>售价</td>
               <td>上映时间</td>
               <td>评分</td>
               <td>操作</td>
           </tr>
           
           <tr ng-repeat="gyninfo in stus|orderBy:px|filter:{name:bname}"> 
               <td><input type="checkbox" ng-model="gyninfo.ck" /></td>
               <td>{{gyninfo.name}}</td>
               <td>{{gyninfo.type[0]}},{{gyninfo.type[1]}}</td> 
               <td>{{gyninfo.time}}</td>
               <td>{{gyninfo.author}}</td>
               <td>{{gyninfo.price|currency:"￥:"}}</td>
               <td>{{gyninfo.playTime|date:'yyyy-MM-dd HH:mm:ss'}}</td>
               <td>{{gyninfo.score}}</td>
               <td><button ng-click="update(gyninfo)">修改</button><button ng-click="del(gyninfo.name)">删除</button> </td>
           </tr>
       </table>
   </body>
</html>