AngularJS电影管理系统-优快云博客

本文链接：https://blog.youkuaiyun.com/oooooooooop/article/details/79836568

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   span{
    color: red;
   }
  </style>
</head>
<script src="js/angular.min.js"></script>
<script>
  angular.module("list",[]).controller("con",function($scope,$http){
   $http.get("http://result.eolinker.com/lKgJQ8Zec38423e5603b8e055d1193a8127c0c060bb1b55?uri=test1").success(function(a){
    $scope.datas=a;
   });
   /*删除*/
   $scope.del=function(a){
    $scope.datas.splice(a,1);
   }
   /*模糊查询*/
   $scope.sel=function(){
    $scope.text1=$scope.text;
   }
   /*全选/全不选*/
   $scope.qx=function(){
    for (var i in $scope.datas) {
     $scope.datas[i].ck=$scope.id;
    }
   }
   /*批量删除*/
   $scope.delAll=function(){
    for (var i=0;i<$scope.datas.length;i++) {
     if($scope.datas[i].ck){
      $scope.datas.splice(i,1);i--;
     }
    }
   }
   /*修改*/
   $scope.up=function(u){
    var ids= prompt("修改评分",u.score);
    if(ids!=null){
     u.score=ids;
    }

   }
   //添加
   $scope.add=function(){
    var id=$scope.id;
    var name=$scope.name;
    var type=$scope.type+","+$scope.typ+","+$scope.ty+","+$scope.t;
    var time=$scope.time;
    var author=$scope.author;
    var price=$scope.price;
    var playTime=$scope.playTime;
    var pro=$scope.pro+"-"+$scope.shop;
    var score=$scope.score;
    if($scope.name==""||$scope.name==null){
     $scope.n=true;

    }
    if($scope.type==""||$scope.type==null){
     $scope.t=true;

    }
    if($scope.time==""||$scope.time==null){
     $scope.ti=true;

    }
    if($scope.author==""||$scope.author==null){
     $scope.au=true;

    }
    if($scope.price==""||$scope.price==null){
     $scope.p=true;

    }
    if($scope.playTime==""||$scope.playTime==null){
     $scope.play=true;

    }

    if($scope.score==""||$scope.score==null){
     $scope.s=true;

    }else{
     $scope.n=false;
     $scope.t=false;
     $scope.ti=false;
     $scope.au=false;
     $scope.p=false;
     $scope.play=false;
     $scope.s=false;
     $scope.playTime=new Date();
     $scope.datas.push({id:$scope.datas.length+1,name:name,type:type,time:time,author:author,price:price,playTime:playTime,pro:pro,score:score});
        $scope.a=false;
    }


   }

  })
</script>
<body ng-app="list" ng-controller="con">
  {{datas}}
  <center>
   <input type="text" placeholder="请按照电影名称查询" ng-model="text"/><button ng-click="sel()" >搜索</button>
   <select ng-model="px">
    <option value="">--按照要求排序--</option>
    <option value="+price">价格正序</option>
    <option value="-price">价格倒序</option>
    <option value="+time">时间正序</option>
    <option value="-time">时间倒序</option>
   </select>
   <input type="button" value="新增订单" ng-click="a=true" />
   <input type="button" value="批量删除" ng-click="delAll()"/>
   <table border="1" cellspacing="0" width="800">
    <tr>
     <th><input type="checkbox" ng-click="qx()" ng-model="id"></th>
     <th>编号</th>
     <th>名称</th>
     <th>类型</th>
     <th>时长</th>
     <th>导演</th>
     <th>售价</th>
     <th>上映时间</th>
     <th>上映地点</th>
     <th>评分</th>
     <th>操作</th>
    </tr>
    <tr ng-repeat="i in datas | filter:{name:text1}|orderBy:px">
     <th><input type="checkbox" ng-model="i.ck"></th>
     <th>{{i.id}}</th>
     <th>{{i.name}}</th>
     <th>{{i.type}}</th>
     <th>{{i.time}}</th>
     <th>{{i.author}}</th>
     <th>{{i.price | currency:"￥："}}</th>
     <th>{{i.playTime | date:"yyyy-MM-dd hh:mm:ss"}}</th>
     <th>{{i.pro}}-{{i.shop}}</th>
     <th>{{i.score}}</th>
     <th>
      <button ng-click="up(i)">修改</button>
      <button ng-click="del($index)">删除</button>
     </th>
    </tr>
   </table>
   <form ng-show="a">
    电影名称<input type="text" ng-model="name" /><span ng-show="n">*名称不能为空</span><br />
    类别<input type="checkbox" ng-model="type" value="喜剧"/>喜剧
    <input type="checkbox" ng-model="typ" value="爱情"/>爱情
    <input type="checkbox" ng-model="ty" value="动作"/>动作
    <input type="checkbox" ng-model="t" value="冒险"/>冒险<span ng-show="t">*类别不能为空</span><br />
    时长<input type="text" ng-model="time" /><span ng-show="ti">*时长不能为空</span><br />
    导演<input type="text" ng-model="author" /><span ng-show="au">*导演不能为空</span><br />
    售价<input type="text" ng-model="price" /><span ng-show="p">*价格不能为空</span><br />
    上映时间<input type="date" ng-model="playTime" /><span ng-show="play">*上映时间不能为空</span><br />
    上映地点<select ng-model="pro" id="sheng" onchange="dj()">
     <option value="">--请选择省份--</option>
     <option>北京</option>
     <option>河北</option>
    </select>
    <select ng-model="shop" id="shi">
     <option value="">--请选择城市--</option>
    </select><br />
    评分<input type="text" ng-model="score" /><span ng-show="s">*评分不能为空</span><br />
    <button ng-click="add()">保存添加</button>
   </form>
  </center>
</body>
<script src="js/jquery-1.11.1.js"></script>
<script>
    function dj(){
    var citys=[{sheng:"北京",shi:["华联","上地","西二旗"]},{sheng:"河北",shi:["邯郸","石家庄","保定"]}];
    var ids=$("#sheng").val();
    var k=[];
    for (var i=0;i<citys.length;i++) {
      if(ids==citys[i].sheng){
       k=citys[i].shi;
      }
    }
    $("#shi option").remove();
    for (var i=0;i<k.length;i++) {
      var op=$("<option>"+k[i]+"</option>");
      $("#shi").append(op);
    }
    }
</script>
</html>

movie