angular网络请求数据进行增删改查

最新推荐文章于 2022-07-15 10:37:12 发布

Android_ElitePerson

最新推荐文章于 2022-07-15 10:37:12 发布

阅读量265

点赞数 1

分类专栏：代码

代码专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>月考</title>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script type="text/javascript">
angular.module("App", [])
.controller("Doem", function($scope, $http) {
//获取数据
$http({
method: "GET",
url: "http://result.eolinker.com/rR1VBtT56a6bb220c10b3d44b65b4787a8aec03c4ec32ce?uri=MonthTest"
}).success(function(data) {
$scope.datas = data;
}).error(function(data) {

});
//删除
$scope.romove = function(index) {
if(confirm("是否确认删除?")) {
$scope.datas.splice(index, 1);
alert("你已删除成功");
} else {
alert("你已取消删除！");
}
}
//全选反选
$scope.selectAll = false;
$scope.selectAllFun = function() {
if($scope.selectAll) {
for(index in $scope.datas) {
$scope.datas[index].state = true;
}
} else {
for(index in $scope.datas) {
$scope.datas[index].state = false;
}
}
}
//批量删除
$scope.delSelect = function() {
//定义一个空数组
var arr = [];
for(index in $scope.datas) {
if($scope.datas[index].state) {
arr.push($scope.datas[index].name);
}
}
if(arr.length <= 0) {
alert("请重新选择删除的项目！");
} else {
if(window.confirm("确定要删除吗?")) {
for(index in arr) {
for(index2 in $scope.datas) {
if(arr[index] == $scope.datas[index2].name) {
$scope.datas.splice(index2, 1);
}
}
}
alert("你已删除成功！");
} else {
alert("你已取消删除！");
}
}
}
var index=0;
//点击修改按钮
$scope.xiugai = function(index,x) {
if(confirm("是否要修改信息")) {
$scope.ngshow = true;

$scope.updateScore = x.score;

}
}
//修改
$scope.xiu = function() {

$scope.datas[index].score = $scope.updateScore;

$scope.ngshow = false;
}
});
</script>
<style>
thead {
background-color: #999999;
}
//even
tbody tr:nth-child(odd) {
background-color: #EEEEEE;
}
</style>
</head>
<body ng-app="App" ng-controller="Doem">
<center>
<input type="text" placeholder="按电影名称模糊查询..." ng-model="chaxun" />
<input type="button" value="搜索" />
<select ng-model="order">
<option>按要求排序</option>
<option value="time">电影时长正序</option>
<option value="-time">电影时长倒序</option>
<option value="price">售价正序</option>
<option value="-price">售价倒序</option>
<option value="playTime">上映时间正序</option>
<option value="-playTime">上映时间倒序</option>
<option value="score">评分正序</option>
<option value="-score">评分倒序</option>
</select>
<input type="button" value="批量删除" ng-click="delSelect()" />
<table border="2" cellspacing="0" width="800">
<thead>
<tr>
<td>
<input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()" />
</td>
<td>电影名称</td>
<td>类型</td>
<td>时长</td>
<td>导演</td>
<td>售价</td>
<td>上映时间</td>
<td>评分</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in datas |orderBy:order | filter:{name:chaxun}">
<td>
<input type="checkbox" ng-model="x.state" />
</td>
<td>{{x.name}}</td>
<td>{{x.type}}</td>
<td>{{x.time}}分钟</td>
<td>{{x.author}}</td>
<td>{{x.price |currency:"¥:"}}</td>
<td>{{x.playTime |date:"yyyy-MM-dd HH:mm:ss"}}</td>
<td>{{x.score}}</td>
<td>
<input type="button" value="修改" ng-click="xiugai($index,x)" />
<input type="button" value="删除" ng-click="romove($index)" />
</td>
</tr>
</tbody>
</table>
<form style="border: 1px solid black; width: 300px;" ng-show="ngshow">
<h3>评分修改</h3> 评分:
<input type="text" ng-model="updateScore" /><br /><br />
<input type="button" value="确定修改" ng-click="xiu()" />
<br /><br /><br /><br />
</form>
</center>
</body>
</html>

Android_ElitePerson

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular网络请求数据进行增删改查

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;月考&lt;/title&gt; &lt;script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.j
复制链接

扫一扫