表格6：《按钮搜索 + 全选 + 排序查询 + 批量删除 + 总计》

最新推荐文章于 2025-02-25 15:45:09 发布

xiaoniba987

最新推荐文章于 2025-02-25 15:45:09 发布

阅读量218

点赞数

本文介绍了一个使用AngularJS实现的电影信息管理系统，包括电影的搜索、排序、批量删除等功能，并展示了如何通过AngularJS指令操作DOM元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title>必须过</title>
       <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
       <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
       <style type="text/css">
           select {
               width: 220px;
               height: 23px;
           }

           table {
               width: 70%;
               margin-top: 10px;
           }

           #div1 {
               width: 70%;
               margin: 0 auto;
           }
           #btn2{
               float: right;

           }
           #btn1{
               margin-left: 30px;
               margin-right: 100px;
               height: 22px;
           }
       </style>

   </head>

   <body ng-app="myapp" ng-controller="myctrl">


           <div id="div1">
               <input type="text" name="" id="id1" value="str" placeholder="按电影名称模糊查询" ng-model="str" />
               <input type="button" name="" id="btn1" value="搜索" ng-click="chaxun_()" />
               <select name=""id="selebtn" ng-model="select_">
                   <option value="0">--按要求排序--</option>
                   <option value="shichang">时长正序</option>
                   <option value="-shichang">时长倒叙</option>
                   <option value="price">售价正序</option>
                   <option value="-price">售价倒叙</option>
                   <option value="pingfen">评分正序</option>
                   <option value="-pingfen">评分倒叙</option>
               </select>
               <span>总计：￥{{addllTao()}}</span>
               <input type="button" name="" id="btn2" value="批量删除" ng-click="del_()" />
           </div>
            <center>
           <table border="1" cellspacing="0" cellpadding="0" style="text-align: center;" ng-show="isShow">
               <thead>
                   <tr>
                       <th><input type="checkbox" name="" id="" value=""ng-model="checkll" /></th>
                       <th>电影名称</th>
                       <th>类别</th>
                       <th>时长</th>
                       <th>导演</th>
                       <th>售价</th>
                       <th>上映时间</th>
                       <th>评分</th>
                       <th>操作</th>
                   </tr>
               </thead>
               <tbody>
                   <tr ng-repeat="x in addll|orderBy:select_|filter:{name:abcd}">
                       <td><input type="checkbox" name="" id="" value="{{$index}}" ng-model="checkll"/></td>
                       <td>{{x.name}}</td>
                       <td>{{x.qingjie}}</td>
                       <td>{{x.shichang}}</td>
                       <td>{{x.names}}</td>
                       <td>{{x.price|currency:"￥"}}</td>
                       <td>{{x.shijian|date:"yyyy-MM-dd"}}</td>
                       <td>{{x.pingfen}}</td>
                       <td><input type="button" name="" id="" value="删除" ng-click="del_2(x.name)" /></td>

                   </tr>
               </tbody>
           </table>
       </center>


       <script type="text/javascript">
           var app=angular.module("myapp",[]);
           app.controller("myctrl",function($scope){
               //定显示默认
               $scope.select_="0";
               $scope.isShow=true;

               //定义数组
               $scope.addll=[
               {name:"前任三",qingjie:"爱情，喜剧",shichang:120,names:"田羽生",price:35,shijian:"2017-11-19",pingfen:9.3},
               {name:"速度与激情",qingjie:"动作，冒险",shichang:146,names:"格雷",price:60,shijian:"2017-12-22",pingfen:9.5},
               {name:"羞羞的铁拳",qingjie:"爱情，喜剧",shichang:118,names:"松阳",price:45,shijian:"2017-11-23",pingfen:9.0},
               {name:"太空救援",qingjie:"冒险，科幻",shichang:106,names:"田羽生",price:45,shijian:"2017-11-30",pingfen:8.6},];

               //点击删除
               $scope.del_2=function(name_123){
                   for (var i = 0; i < $scope.addll.length; i++) {
                       if ($scope.addll[i].name=name_123) {
                          $scope.addll.splice(i,1);
                          break;
                       }
                   }
               }
               //点击批量删除
               $scope.del_=function(){
                    var aaa=$("input:checked");//选中的删除
                         for (var i = aaa.length-1; i >=0; i--) {
                        //得到序号--从0开始
                        var index=aaa[i].value;
                        //进行删除
                        $scope.addll.splice(index,1);
                    }
                }
               //点击搜索
               $scope.chaxun_=function(){
                  var s=$("#id1").val();
                  $scope.abcd=s;
                  if (s==null) {
                      $scope.isShow=true;
                  }
               }
               //总价钱
               $scope.addllTao=function(){
                  var lxl=0;
                  for (var i = 0; i < $scope.addll.length; i++) {
                      lxl+=$scope.addll[i].price;
                  }
                  return lxl;
               }
       ////////////
           })


       </script>
   </body>

</html>