电影

<!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>
            <!--{"price":35.9,"author":"田羽生","time":120,"type":["喜剧","爱情"],"id":1,"name":"前任三","playTime":1511050949001,"score":9.3}-->
            <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> <!--gaoyn.type: ["喜剧","爱情"]==>数组 -->
                <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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值