获得json数据(表格)

最新推荐文章于 2022-09-08 17:53:15 发布

哥哥_

最新推荐文章于 2022-09-08 17:53:15 发布

阅读量822

点赞数

本文链接：https://blog.csdn.net/QQ_907465912/article/details/78530018

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angular.js" ></script>
<script>
var app = angular.module("myApp",[]);

//注入$http对象
app.controller("myCtrl",function($scope,$http){

//调用$http()请求服务器。
$http({
method:"get",//请求方式
url:"haha.json"//请求路径
}).then(function success(response){//请求成功之后的回调函数
//console.log(response.data[1].sex);
$scope.users = response.data;//获取json数据源中的数据
},function error(){//请求失败时执行的回调函数
$scope.users = null;
});

//删除用户
$scope.delete = function(index){
var con = confirm("确定删除?");
if(con==true){
$scope.users.splice(index,1);
}
}

$scope.isShow = function(){
if($scope.users.length>0){
return true;
}else{
return false;
}
}
});

/* 1.$http服务请求服务器，获得服务器端的数据 */

</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h3>我的用户表</h3>
<table ng-if="isShow()" border="1px solide blue" cellpadding="10" cellspacing="0" width="600px" align="center">
<thead>
<tr>
<th>用户名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody align="center">
<tr ng-repeat="user in users">
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>{{user.sex}}</td>
<td><button ng-click="delete($index)">删除</button></td>
</tr>
</tbody>
</table>
<p ng-if="!isShow()">用户表为空！</p>
</center>
</body>
</html>

哥哥_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
获得json数据(表格)

var app = angular.module("myApp",[]);//注入$http对象app.controller("myCtrl",function($scope,$http){//调用$http()请求服务器。$http({method:"get",//请求方式url:"haha.json"//请求路径}).then(function succes
复制链接

扫一扫