222

最新推荐文章于 2023-11-08 16:14:21 发布

jxf201400

最新推荐文章于 2023-11-08 16:14:21 发布

阅读量119

点赞数 1

本文链接：https://blog.csdn.net/jxf201400/article/details/79839217

版权

<!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">
           thead{
               background: gray;
           }
           .tip{
               background: red;
           }

       </style>
   </head>
   <body ng-app="myapp" ng-controller="myctrl">
       <input type="text" name="" id="" value="" placeholder="按电影名称模糊查询" ng-model="searchKey1" />
       <input type="button" id="" value="搜索" ng-click="search()" />
       <select name="" ng-model="orderKey">
           <option value="0">按要求排序</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" id="" value="批量删除" ng-click="delAll()" />
       <input type="button" id="" value="清空所有数据" ng-click="clearAll()"/>
       <input type="button" id="" value="添加数据" ng-click="isShow=!isShow" />
       <table border="1" cellspacing="0" cellpadding="0" width="60%">
           <thead ><tr>
               <th><input type="checkbox" id="" value="" ng-model="checkAll" /></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 films|filter:searchKey|orderBy:orderKey">
               <td><input type="checkbox" id="" value="{{x.name}}" ng-model="checkAll" /></td>
               <td>{{x.name}}</td>
               <td>{{x.type[0]+","+x.type[1]}}</td>
               <td>{{x.time}}</td>
               <td>{{x.author}}</td>
               <td>{{x.price|currency:"￥："}}</td>
               <td>{{x.playTime|date:"MM-dd mm:ss"}}</td>
               <td>{{x.score}}</td>
               <td>
               <input type="button" id="" value="修改" ng-click="modify(x.name)" />
               <input type="button" id="" value="删除" ng-click="delfilm(x.name)"/>
               </td>
           </tr></tbody>

       </table>
       <div>总价是：{{getTotal()|currency:"￥："}}</div>

       <fieldset id="" ng-show="isShow">
           <legend>添加电影</legend>
           <table border="0" cellspacing="0" cellpadding="0">
               <tr><td align="right">电影名称：</td><td><input type="text" name="" id="" value="" ng-model="aname" /></td>
                   <td><span id="s_name" class="tip"></span></td>
               </tr>
               <tr><td align="right">类别：</td>
                   <td>
                   <select ng-init="select_maintype=filmsType[0]" ng-model="select_maintype"   ng-options="x.mainType for x in filmsType"
                      ng-click="changeType()">

                   </select>

                   <select ng-init="select_child=select_maintype.childType[0]" ng-model="select_child" ng-options="y for y in select_maintype.childType">

                   </select>


                   </td>
                   <td><span id="s_type" class="tip"></span></td>
               </tr>
               <tr><td align="right">时长：</td><td><input type="text" name="" id="" value="" ng-model="atime" /></td>
                   <td><span id="s_time" class="tip"></span></td>
               </tr>
               <tr><td align="right">导演：</td><td><input type="text" name="" id="" value="" ng-model="aauthor" /></td>
                   <td><span id="s_author" class="tip"></span></td>
               </tr>
               <tr><td align="right">售价：</td><td><input type="text" name="" id="" value="" ng-model="aprice" /></td>
                   <td><span id="s_price" class="tip"></span></td>
               </tr>
               <tr><td align="right">上映时间：</td><td><input type="date" name="" id="" value="" ng-model="apaytime" /></td>
                   <td><span id="s_paytime" class="tip"></span></td>
               </tr>
               <tr><td align="right">评分：</td><td><input type="text" name="" id="" value="" ng-model="ascore" /></td>
                   <td><span id="s_score" class="tip"></span></td>
               </tr>
               <tr><td align="center" colspan="2"><input type="button" id="" value="保存" ng-click="save()"/></td></tr>
           </table>


       </fieldset>








       <fieldset id="" ng-show="isModifyShow">
           <legend>修改电影</legend>
           <table border="0" cellspacing="0" cellpadding="0">
               <tr><td align="right">电影名称：</td><td><input type="text" name="" id="" value="" ng-model="mname" /></td>
               </tr>

               <tr><td align="right">时长：</td><td><input type="text" name="" id="" value="" ng-model="mtime" /></td>
                   <td><span id="s_time" class="tip"></span></td>
               </tr>
               <tr><td align="right">导演：</td><td><input type="text" name="" id="" value="" ng-model="mauthor" /></td>
                   <td><span id="s_author" class="tip"></span></td>
               </tr>



               <tr><td align="center" colspan="2"><input type="button" id="" value="修改保存" ng-click="modifySave()"/></td></tr>
           </table>


       </fieldset>







       <script type="text/javascript">
           var app=angular.module("myapp",[]);
           app.controller("myctrl",function($scope,$http){

               $scope.orderKey="0";
               $scope.checkAll=false;
               //进行初使化
               $scope.films=[];
               //初使化-添加信息
               $scope.isShow=false;

               $scope.isModifyShow=false;

               $scope.filmsType=[
               {"mainType":"喜剧","childType":["喜剧1","喜剧2"]},
               {"mainType":"历史","childType":["历史1","历史2","历史3"]},
               {"mainType":"科幻","childType":["科幻1"]}];


               //请求网络数据
               $http({
                   method:"GET",
                   url:"newdata.json"
//                   url:"http://result.eolinker.com/rR1VBtT56a6bb220c10b3d44b65b4787a8aec03c4ec32ce?uri=MonthTest"
               }).then(function success(response){
                   $scope.films=response.data;

               },function error(response){

               });



               //得到总价
               $scope.getTotal=function(){
                   var totalPrice=0;
                   for (var i = 0; i < $scope.films.length; i++) {
                       totalPrice+=$scope.films[i].price;
                   }
                   return totalPrice;
               }
               //删除数据
               $scope.delfilm=function(fname){
                   for (var i = 0; i < $scope.films.length; i++) {
                       if($scope.films[i].name==fname){
                           $scope.films.splice(i,1);
                           break;
                       }
                   }
               }
               //清除所有数据
               $scope.clearAll=function(){
                   $scope.films=[];
               }

               //进行查询
               $scope.search=function(){
                   $scope.searchKey=$scope.searchKey1;
               }

               //批量删除
               $scope.delAll=function(){
                   //选择出所出选中的checkbox
                   var checks=$("input:checked");
                   for (var i = 0; i < checks.length; i++) {

                       //得到电影名称
                       var fn=checks[i].value;

                       for (var j = 0; j < $scope.films.length; j++) {
                           if(fn==$scope.films[j].name){
                               //进行删除
                               $scope.films.splice(j,1);
                               break;
                           }
                       }

                   }
               }

               //切换类型
               $scope.changeType=function(){
                   $scope.select_child=$scope.select_maintype.childType[0];
               }

               $scope.save=function(){
                   //清空所有的错误提示信息
                   $(".tip").html("");
                   //电影名称
                   var aname=$scope.aname;
                   if(aname==null || aname.length<3 || aname.length>10){
                       $("#s_name").html("电影名称不能为空，且长度在3~10之间");
                       return;
                   }
                   var atime=$scope.atime;
                   if(atime==null){
                       $("#s_time").html("时长不能为空");
                       return;
                   }

                   var paytime=$scope.apaytime;
                   if(paytime==null){
                       $("#s_paytime").html("上映时间不能为空");
                       return;
                   }

                   var newdata={};
                   newdata.name=aname;
                   newdata.price=$scope.aprice;
                   newdata.author=$scope.aauthor;
                   newdata.time=atime;

                   //得到类型
                   var types=[];
                   types.push($scope.select_maintype.mainType);
                   types.push($scope.select_child);

                   newdata.type=types;
                   newdata.playTime=paytime;
                   newdata.score=$scope.ascore;


                   $scope.films.push(newdata);


               }
               var data="";
               $scope.modify=function(fname){
                   $scope.isModifyShow=!$scope.isModifyShow;

                   for (var i = 0; i < $scope.films.length; i++) {
                       if($scope.films[i].name==fname){
                           data=$scope.films[i];
                           //进行赋值
                           $scope.mname=data.name;
                           $scope.mtime=data.time;
                           $scope.mauthor=data.author;
                           break;
                       }
                   }
               }
               //进行修改
               $scope.modifySave=function(){
                   data.name=$scope.mname;
                   data.time=$scope.mtime;
                   data.author=$scope.mauthor;

                   $scope.isModifyShow=!$scope.isModifyShow;

               }

           });
       </script>

   </body>
</html>

<!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">
           thead{
               background: gray;
           }
           .tip{
               background: red;
           }

       </style>
   </head>
   <body ng-app="myapp" ng-controller="myctrl">
       <input type="text" name="" id="" value="" placeholder="按电影名称模糊查询" ng-model="searchKey1" />
       <input type="button" id="" value="搜索" ng-click="search()" />
       <select name="" ng-model="orderKey">
           <option value="0">按要求排序</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" id="" value="批量删除" ng-click="delAll()" />
       <input type="button" id="" value="清空所有数据" ng-click="clearAll()"/>
       <input type="button" id="" value="添加数据" ng-click="isShow=!isShow" />
       <table border="1" cellspacing="0" cellpadding="0" width="60%">
           <thead ><tr>
               <th><input type="checkbox" id="" value="" ng-model="checkAll" /></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 films|filter:searchKey|orderBy:orderKey">
               <td><input type="checkbox" id="" value="{{x.name}}" ng-model="checkAll" /></td>
               <td>{{x.name}}</td>
               <td>{{x.type[0]+","+x.type[1]}}</td>
               <td>{{x.time}}</td>
               <td>{{x.author}}</td>
               <td>{{x.price|currency:"￥："}}</td>
               <td>{{x.playTime|date:"MM-dd mm:ss"}}</td>
               <td>{{x.score}}</td>
               <td>
               <input type="button" id="" value="修改" ng-click="modify(x.name)" />
               <input type="button" id="" value="删除" ng-click="delfilm(x.name)"/>
               </td>
           </tr></tbody>

       </table>
       <div>总价是：{{getTotal()|currency:"￥："}}</div>

       <fieldset id="" ng-show="isShow">
           <legend>添加电影</legend>
           <table border="0" cellspacing="0" cellpadding="0">
               <tr><td align="right">电影名称：</td><td><input type="text" name="" id="" value="" ng-model="aname" /></td>
                   <td><span id="s_name" class="tip"></span></td>
               </tr>
               <tr><td align="right">类别：</td>
                   <td>
                   <select ng-init="select_maintype=filmsType[0]" ng-model="select_maintype"   ng-options="x.mainType for x in filmsType"
                      ng-click="changeType()">

                   </select>

                   <select ng-init="select_child=select_maintype.childType[0]" ng-model="select_child" ng-options="y for y in select_maintype.childType">

                   </select>


                   </td>
                   <td><span id="s_type" class="tip"></span></td>
               </tr>
               <tr><td align="right">时长：</td><td><input type="text" name="" id="" value="" ng-model="atime" /></td>
                   <td><span id="s_time" class="tip"></span></td>
               </tr>
               <tr><td align="right">导演：</td><td><input type="text" name="" id="" value="" ng-model="aauthor" /></td>
                   <td><span id="s_author" class="tip"></span></td>
               </tr>
               <tr><td align="right">售价：</td><td><input type="text" name="" id="" value="" ng-model="aprice" /></td>
                   <td><span id="s_price" class="tip"></span></td>
               </tr>
               <tr><td align="right">上映时间：</td><td><input type="date" name="" id="" value="" ng-model="apaytime" /></td>
                   <td><span id="s_paytime" class="tip"></span></td>
               </tr>
               <tr><td align="right">评分：</td><td><input type="text" name="" id="" value="" ng-model="ascore" /></td>
                   <td><span id="s_score" class="tip"></span></td>
               </tr>
               <tr><td align="center" colspan="2"><input type="button" id="" value="保存" ng-click="save()"/></td></tr>
           </table>


       </fieldset>








       <fieldset id="" ng-show="isModifyShow">
           <legend>修改电影</legend>
           <table border="0" cellspacing="0" cellpadding="0">
               <tr><td align="right">电影名称：</td><td><input type="text" name="" id="" value="" ng-model="mname" /></td>
               </tr>

               <tr><td align="right">时长：</td><td><input type="text" name="" id="" value="" ng-model="mtime" /></td>
                   <td><span id="s_time" class="tip"></span></td>
               </tr>
               <tr><td align="right">导演：</td><td><input type="text" name="" id="" value="" ng-model="mauthor" /></td>
                   <td><span id="s_author" class="tip"></span></td>
               </tr>



               <tr><td align="center" colspan="2"><input type="button" id="" value="修改保存" ng-click="modifySave()"/></td></tr>
           </table>


       </fieldset>







       <script type="text/javascript">
           var app=angular.module("myapp",[]);
           app.controller("myctrl",function($scope,$http){

               $scope.orderKey="0";
               $scope.checkAll=false;
               //进行初使化
               $scope.films=[];
               //初使化-添加信息
               $scope.isShow=false;

               $scope.isModifyShow=false;

               $scope.filmsType=[
               {"mainType":"喜剧","childType":["喜剧1","喜剧2"]},
               {"mainType":"历史","childType":["历史1","历史2","历史3"]},
               {"mainType":"科幻","childType":["科幻1"]}];


               //请求网络数据
               $http({
                   method:"GET",
                   url:"newdata.json"
//                   url:"http://result.eolinker.com/rR1VBtT56a6bb220c10b3d44b65b4787a8aec03c4ec32ce?uri=MonthTest"
               }).then(function success(response){
                   $scope.films=response.data;

               },function error(response){

               });



               //得到总价
               $scope.getTotal=function(){
                   var totalPrice=0;
                   for (var i = 0; i < $scope.films.length; i++) {
                       totalPrice+=$scope.films[i].price;
                   }
                   return totalPrice;
               }
               //删除数据
               $scope.delfilm=function(fname){
                   for (var i = 0; i < $scope.films.length; i++) {
                       if($scope.films[i].name==fname){
                           $scope.films.splice(i,1);
                           break;
                       }
                   }
               }
               //清除所有数据
               $scope.clearAll=function(){
                   $scope.films=[];
               }

               //进行查询
               $scope.search=function(){
                   $scope.searchKey=$scope.searchKey1;
               }

               //批量删除
               $scope.delAll=function(){
                   //选择出所出选中的checkbox
                   var checks=$("input:checked");
                   for (var i = 0; i < checks.length; i++) {

                       //得到电影名称
                       var fn=checks[i].value;

                       for (var j = 0; j < $scope.films.length; j++) {
                           if(fn==$scope.films[j].name){
                               //进行删除
                               $scope.films.splice(j,1);
                               break;
                           }
                       }

                   }
               }

               //切换类型
               $scope.changeType=function(){
                   $scope.select_child=$scope.select_maintype.childType[0];
               }

               $scope.save=function(){
                   //清空所有的错误提示信息
                   $(".tip").html("");
                   //电影名称
                   var aname=$scope.aname;
                   if(aname==null || aname.length<3 || aname.length>10){
                       $("#s_name").html("电影名称不能为空，且长度在3~10之间");
                       return;
                   }
                   var atime=$scope.atime;
                   if(atime==null){
                       $("#s_time").html("时长不能为空");
                       return;
                   }

                   var paytime=$scope.apaytime;
                   if(paytime==null){
                       $("#s_paytime").html("上映时间不能为空");
                       return;
                   }

                   var newdata={};
                   newdata.name=aname;
                   newdata.price=$scope.aprice;
                   newdata.author=$scope.aauthor;
                   newdata.time=atime;

                   //得到类型
                   var types=[];
                   types.push($scope.select_maintype.mainType);
                   types.push($scope.select_child);

                   newdata.type=types;
                   newdata.playTime=paytime;
                   newdata.score=$scope.ascore;


                   $scope.films.push(newdata);


               }
               var data="";
               $scope.modify=function(fname){
                   $scope.isModifyShow=!$scope.isModifyShow;

                   for (var i = 0; i < $scope.films.length; i++) {
                       if($scope.films[i].name==fname){
                           data=$scope.films[i];
                           //进行赋值
                           $scope.mname=data.name;
                           $scope.mtime=data.time;
                           $scope.mauthor=data.author;
                           break;
                       }
                   }
               }
               //进行修改
               $scope.modifySave=function(){
                   data.name=$scope.mname;
                   data.time=$scope.mtime;
                   data.author=$scope.mauthor;

                   $scope.isModifyShow=!$scope.isModifyShow;

               }

           });
       </script>

   </body>
</html>