<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript" src="js/angular.js" ></script>
<script>
var app=angular.module("myApp",[])
app.controller("myCtrl",function($scope,$http){
$scope.josnnet="";
$http({
method:"get",
url:"http://gank.io/api/data/Android/10/1"
}).then(function success(response){
$scope.jsonnet=response.data;
},function error(response){})
//删除
$scope.deleteG=function($index){
$scope.jsonnet.results.splice($index,1)
}
$scope.mysource="";
$scope.mytype="";
$scope.mywho="";
$scope.mypublishedAt=new Date();
$scope.ifshow=false;
$scope.isshow=function(){
$scope.ifshow=!$scope.ifshow;
}
//添加信息
$scope.myadd=function(){
if($("#btn").val()=="添加"){
var stu={
source:$scope.mysource,
type:$scope.mytype,
who:$scope.mywho,
publishedAt:$scope.mypublishedAt
}
$scope.jsonnet.results.push(stu);
$scope.ifshow=false;
}else{
$scope.jsonnet.results[$scope.count].source=$scope.mysource;
$scope.jsonnet.results[$scope.count].type=$scope.mytype;
$scope.jsonnet.results[$scope.count].who=$scope.mywho;
$scope.ifshow=false;
}
}
$scope.count="";
//修改的方法
$scope.alertG=function($index){
$scope.count=$index;
$scope.ifshow=true;
$("#btn").val("修改");
$scope.mysource=$scope.jsonnet.results[$index].source;
$scope.mytype=$scope.jsonnet.results[$index].type;
$scope.mywho=$scope.jsonnet.results[$index].who;
}
$scope.deletemore=function($index){
$scope.jsonnet.results[$index].ch=!$scope.jsonnet.results[$index].ch;
}
$scope.deleteall=function(){
var v=$scope.ch;
if(v){
for (var i=v.$scope.jsonnet.results.length-1;i>=0;i--) {
$scope.jsonnet.results.splice(i,1)
}
}
for (var i=$scope.jsonnet.results.length-1;i>=0;i--) {
if($scope.jsonnet.results[i].ch){
$scope.jsonnet.results.splice(i,1)
}
}
}
//排序的order
$scope.orderkey="";
$scope.ordername="";
})
</script>
<style>
tr{text-align: center;}
span{color: red;}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center >
排序:<select ng-model="orderkey">
<option value="publishedAt">日期小到大</option>
<option value="-publishedAt">日期大到小</option>
</select>
<input type="text" placeholder="请输入姓名迷糊查询" ng-model="ordername" />
<!--添加页面按钮-->
<input type="button" value="展示添加页面" ng-click="isshow()" />
<!--批量删除-->
<input type="button" value="批量删除" ng-click="deleteall()" />
<table border="1" width="1000px">
<tr>
<th><input type="checkbox" ng-model="ch"/></th><th>序号</th><th>source</th><th>type</th><th>who</th><th>publishedAt</th><th>操作</th>
</tr>
<tr ng-repeat="g in jsonnet.results | orderBy:orderkey | filter:ordername">
<td><input type="checkbox" ng-checked="ch" ng-click="deletemore($index)"/></td>
<td>{{$index}}</td>
<td>{{g.source}}</td>
<td>{{g.type}}</td>
<td>{{g.who}}</td>
<td>{{g.publishedAt | date:"yyyy-MM-dd hh:mm:ss"}}</td>
<td>
<input type="button" value="删除" ng-click="deleteG($index)"/>
<input type="button" value="修改" ng-click="alertG($index)" />
</td>
</tr>
</table>
<!--分割线-->
<hr width="100%" color="red"/>
<form name="myfrom" ng-show="ifshow">
<input type="text" name="mysource" placeholder="请输入source" ng-model="mysource" required=""/>
<span ng-show="myfrom.mysource.$error.required">不能为空</span><br />
<!--type-->
<input type="text" name="mytype" placeholder="请输入type" ng-model="mytype" required=""/>
<span ng-show="myfrom.mytype.$error.required">不能为空</span><br />
<!--who-->
<input type="text" name="mywho" placeholder="请输入who" ng-model="mywho" required=""/>
<span ng-show="myfrom.mywho.$error.required">不能为空</span><br />
<input type="button" value="添加" id="btn" ng-click="myadd()"/>
</form>
</center>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript" src="js/angular.js" ></script>
<script>
var app=angular.module("myApp",[])
app.controller("myCtrl",function($scope,$http){
$scope.josnnet="";
$http({
method:"get",
url:"http://gank.io/api/data/Android/10/1"
}).then(function success(response){
$scope.jsonnet=response.data;
},function error(response){})
//删除
$scope.deleteG=function($index){
$scope.jsonnet.results.splice($index,1)
}
$scope.mysource="";
$scope.mytype="";
$scope.mywho="";
$scope.mypublishedAt=new Date();
$scope.ifshow=false;
$scope.isshow=function(){
$scope.ifshow=!$scope.ifshow;
}
//添加信息
$scope.myadd=function(){
if($("#btn").val()=="添加"){
var stu={
source:$scope.mysource,
type:$scope.mytype,
who:$scope.mywho,
publishedAt:$scope.mypublishedAt
}
$scope.jsonnet.results.push(stu);
$scope.ifshow=false;
}else{
$scope.jsonnet.results[$scope.count].source=$scope.mysource;
$scope.jsonnet.results[$scope.count].type=$scope.mytype;
$scope.jsonnet.results[$scope.count].who=$scope.mywho;
$scope.ifshow=false;
}
}
$scope.count="";
//修改的方法
$scope.alertG=function($index){
$scope.count=$index;
$scope.ifshow=true;
$("#btn").val("修改");
$scope.mysource=$scope.jsonnet.results[$index].source;
$scope.mytype=$scope.jsonnet.results[$index].type;
$scope.mywho=$scope.jsonnet.results[$index].who;
}
$scope.deletemore=function($index){
$scope.jsonnet.results[$index].ch=!$scope.jsonnet.results[$index].ch;
}
$scope.deleteall=function(){
var v=$scope.ch;
if(v){
for (var i=v.$scope.jsonnet.results.length-1;i>=0;i--) {
$scope.jsonnet.results.splice(i,1)
}
}
for (var i=$scope.jsonnet.results.length-1;i>=0;i--) {
if($scope.jsonnet.results[i].ch){
$scope.jsonnet.results.splice(i,1)
}
}
}
//排序的order
$scope.orderkey="";
$scope.ordername="";
})
</script>
<style>
tr{text-align: center;}
span{color: red;}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center >
排序:<select ng-model="orderkey">
<option value="publishedAt">日期小到大</option>
<option value="-publishedAt">日期大到小</option>
</select>
<input type="text" placeholder="请输入姓名迷糊查询" ng-model="ordername" />
<!--添加页面按钮-->
<input type="button" value="展示添加页面" ng-click="isshow()" />
<!--批量删除-->
<input type="button" value="批量删除" ng-click="deleteall()" />
<table border="1" width="1000px">
<tr>
<th><input type="checkbox" ng-model="ch"/></th><th>序号</th><th>source</th><th>type</th><th>who</th><th>publishedAt</th><th>操作</th>
</tr>
<tr ng-repeat="g in jsonnet.results | orderBy:orderkey | filter:ordername">
<td><input type="checkbox" ng-checked="ch" ng-click="deletemore($index)"/></td>
<td>{{$index}}</td>
<td>{{g.source}}</td>
<td>{{g.type}}</td>
<td>{{g.who}}</td>
<td>{{g.publishedAt | date:"yyyy-MM-dd hh:mm:ss"}}</td>
<td>
<input type="button" value="删除" ng-click="deleteG($index)"/>
<input type="button" value="修改" ng-click="alertG($index)" />
</td>
</tr>
</table>
<!--分割线-->
<hr width="100%" color="red"/>
<form name="myfrom" ng-show="ifshow">
<input type="text" name="mysource" placeholder="请输入source" ng-model="mysource" required=""/>
<span ng-show="myfrom.mysource.$error.required">不能为空</span><br />
<!--type-->
<input type="text" name="mytype" placeholder="请输入type" ng-model="mytype" required=""/>
<span ng-show="myfrom.mytype.$error.required">不能为空</span><br />
<!--who-->
<input type="text" name="mywho" placeholder="请输入who" ng-model="mywho" required=""/>
<span ng-show="myfrom.mywho.$error.required">不能为空</span><br />
<input type="button" value="添加" id="btn" ng-click="myadd()"/>
</form>
</center>
</body>
</html>