源代码增删

最新推荐文章于 2022-05-10 17:56:36 发布
原创最新推荐文章于 2022-05-10 17:56:36 发布 · 264 阅读
CC 4.0 BY-SA版权
本文介绍了一个使用AngularJS实现的数据管理应用案例，该应用包括数据获取、显示、添加、修改及删除等功能，并支持按条件筛选、排序及批量操作。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.js" ></script>
<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
<script>
var app = angular.module("myapp",[]);

app.controller("myCtrl",function($scope,$http){

$scope.shuju = "";

$http({

method:"get",
url:"http://gank.io/api/data/Android/10/1"

}).then(function success(response){
$scope.shuju = response.data;
},function error(response){

});


//删除
$scope.shan = function($index){

for (var i = 0; i < $scope.shuju.results.length; i++) {

if($scope.shuju.results[i]._id == $index){

if(confirm("是否删除")){

$scope.shuju.results.splice(i,1);
}
}
}
}

//入库
$scope.ru = false;

$scope.newid = "";
$scope.newtype = "";
$scope.newsource = "";
$scope.newused = "";

//显示添加
$scope.ruku = function(){

$scope.ru = !$scope.ru;

}

//点击添加
$scope.tian = function(){

if($scope.newid != null && $scope.newid  != ""){

$("#s1").html("<font color='red'></font>");


if($scope.newsource != null && $scope.newtype  != ""){

$("#s2").html("<font color='red'></font>");

if($scope.newtype != null && $scope.newsource  != ""){

$("#s3").html("<font color='red'></font>");

if($scope.newused != null && $scope.newused  != ""){

$("#s4").html("<font color='red'></font>");

var goods={
_id : $scope.newid,
type : $scope.newtype,
source : $scope.newsource,
used : $scope.newused,
createdAt : new Date()
};

$scope.shuju.results.push(goods);
$scope.ru = false;

}else{
//alert("used为空");
$("#s4").html("<font color='red'>used为空</font>");
}

}else{
//alert("type为空");
$("#s3").html("<font color='red'>source为空</font>");
}

}else{
//alert("source为空");
$("#s2").html("<font color='red'>type为空</font>");
}

}else{
//alert("id为空");
$("#s1").html("<font color='red'>id为空</font>");
}

}

//修改
$scope.xiu = false;

$scope.newid1 = "";
$scope.newtype1 = "";
$scope.newsource1 = "";
$scope.newused1 = "";

$scope.x = 0;

//显示添加
$scope.xiugai = function($index){

$scope.xiu = !$scope.xiu;
$scope.x = $index;
$scope.newid1 = $scope.shuju.results[$scope.x]._id;
$scope.newtype1 = $scope.shuju.results[$scope.x].type;
$scope.newsource1 = $scope.shuju.results[$scope.x].source;
$scope.newused1 = $scope.shuju.results[$scope.x].used;

}
//点击修改
$scope.xiu1 = function(){
$scope.shuju.results[$scope.x]._id = $scope.newid1;
$scope.shuju.results[$scope.x].type = $scope.newtype1;
$scope.shuju.results[$scope.x].source = $scope.newsource1;
$scope.shuju.results[$scope.x].used = $scope.newused1;
$scope.shuju.results[$scope.x].createdAt = new Date();
$scope.xiu = false;
}



//批量删除

$scope.dian = function($index){
$scope.shuju.results[$index].qx = !$scope.shuju.results[$index].qx;
}

$scope.pi = function(){

var a = $scope.qx;

if(a){
for(var i=$scope.shuju.results.length-1 ; i>=0 ; i--){

$scope.shuju.results.splice(i,1);
}
}

//点击删除
for(var i=$scope.shuju.results.length-1 ; i>=0 ; i--){

if($scope.shuju.results[i].qx){
$scope.shuju.results.splice(i,1);
}
}
  }
});
</script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">

<input type="text" placeholder="按type搜索" ng-model="sou1" />
<input type="text" placeholder="按时间搜索" ng-model="sou2" />

<input type="button" value="入库" ng-click="ruku()" />

<select ng-model="pai">
<option value="">--请选择--</option>
<option value="_id">按id升序</option>
<option value="-_id">按id降序</option>
<option value="createdAt">按时间升序</option>
<option value="-createdAt">按时间降序</option>
</select>

<input type="button" value="批量删除" ng-click="pi()" />

<table border="1" width="1000px">
<tr>
<th>
<input type="checkbox" ng-model="qx" />
</th>
<th>_id</th>
<th>type</th>
<th>source</th>
<th>used</th>
<th>createdAt</th>
<th>操作</th>
</tr>

<tr ng-repeat="g in shuju.results | filter:{type:sou1,createdAt:sou2} | orderBy:pai">
<td align="center">
<input type="checkbox" ng-checked="qx" ng-click="dian($index)"/>
</td>
<td align="center">{{g._id}}</td>
<td align="center">{{g.type}}</td>
<td align="center">{{g.source}}</td>
<td align="center">{{g.used}}</td>
<td align="center">{{g.createdAt | date:"yyyy-MM-dd hh:mm:ss"}}</td>
<td align="center">
<input type="button" value="删除" ng-click="shan(g._id)" />
<input type="button" value="修改" ng-click="xiugai($index)" />
</td>
</tr>

</table>

<div ng-show="ru">

id<input type="text" placeholder="添id" ng-model="newid" />
<span id="s1"></span>
<br /><br />
type<input type="text" placeholder="添type" ng-model="newtype" />
<span id="s2"></span>
<br /><br />
source<input type="text" placeholder="添source" ng-model="newsource" />
<span id="s3"></span>
<br /><br />
used<input type="text" placeholder="添used" ng-model="newused" />
<span id="s4"></span>
<br /><br />
<input type="button" value="添加" ng-click="tian()" />
</div>

<div ng-show="xiu">

id<input type="text" placeholder="添id" ng-model="newid1" /><br /><br />
type<input type="text" placeholder="添type" ng-model="newtype1" /><br /><br />
source<input type="text" placeholder="添source" ng-model="newsource1" /><br /><br />
used<input type="text" placeholder="添used" ng-model="newused1" /><br /><br />
<input type="button" value="修改" ng-click="xiu1()" />
</div>
</body>
</html>