<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script></head>
<style>
*{margin: 0;padding:0;}
table{width:100%;height:auto;text-align: left;}
tr{border:1px solid #eee;}
table,tr,td{border-collapse: collapse;}
tr>th{width:25%;height:auto;}
.app_save_box{width:50px;height:30px;background:#00B83F;color:#fff;text-align: center;line-height: 30px;margin: 20px auto;}</style>
<body>
<p ng-app="myApp" ng-controller="customersCtrl">
<form action="">
<table>
<tr>
<th>序号</th>
<th>应用名</th>
<th>网址</th>
</tr>
<tr ng-repeat="x in names">
<td>{{ x.id }}</td>
<td>
<input type="text" value="{{ x.name }}" disabled="disabled"/>
<button class="app_name_change">修改</button>
</td>
<td>
<input type="text" value="{{ x.url }}" disabled="disabled"/>
<button class="app_url_change">修改</button>
</td>
<td>
<button class="app-delete">删除该项</button>
</td>
</tr>
</table>
</form>
<p class="app_save_box">保存</p></p>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("data.php")
.then(function (result) {
$scope.names = result.data.records;
});
});
$(".app_name_change").on("click",function(){
$(this).prev().removeAttr("disabled")
})</script>
</body>
</html>
php代碼
<?php
echo <<<EOT
{
"records":[
{"id":"1","name":"新浪","url":"http://www .sina.com"},
{"id":"2","name":"百度","url":"http://www.baidu.com"}
]
}
EOT;
? >
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Ajouter
header('Content-Type: application/json');laisser le contenu de sortie être json