博客

获得json数据(表格)

  • Post author:
  • Post category:其他


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


版权声明：本文为QQ_907465912原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。