<!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>
<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>