2月月考题同下

最新推荐文章于 2022-07-15 10:37:12 发布

原创最新推荐文章于 2022-07-15 10:37:12 发布 · 126 阅读

CC 4.0 BY-SA版权

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title>月考</title>
       <script src="libs/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>

2月月考题 同下

2月月考题同下