Question

尝试获取一些JSON和Angular.js以解决任何运气问题。我正在使用以下代码，但是当单击“单击此处”时，它似乎没有运行loadpeople函数。可能会遗漏一些愚蠢的东西。

HTML

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Render json in table using AngularJs - jsFiddle demo by mjaric</title>


      <link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">

      <script type='text/javascript' src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
      <script type='text/javascript' src="loadpeople.js"></script>

      <script type='text/javascript' src="http://code.angularjs.org/1.0.1/angular-1.0.1.min.js"></script>


  <style type='text/css'>
    table {
  border: 1px solid #666;   
    width: 100%;
}
th {
  background: #f8f8f8; 
  font-weight: bold;    
    padding: 2px;
}

  </style>

</head>
<body>
  <div ng-app="myApp">
<div ng-controller="PeopleCtrl">
    <p>    Click <a ng-click="loadPeople()">here</a> to load data.</p>
<table>
    <tr>
        <th>Id</th>
        <th>First Name</th>
        <th>Last Name</th>
    </tr>
    <tr ng-repeat="person in people">
        <td>{{person.id}}</td>
        <td>{{person.firstName}}</td>
        <td>{{person.lastName}}</td>
    </tr>
</table>
</div>
</div>

</body>


</html>

JS

var mockDataForThisTest = "json=" + encodeURI(JSON.stringify([
    {
    id: 1,
    firstName: "Peter",
    lastName: "Jhons"},
{
    id: 2,
    firstName: "David",
    lastName: "Bowie"}
]));


var app = angular.module('myApp', []);

function PeopleCtrl($scope, $http) {

    $scope.people = [];

    $scope.loadPeople = function() {
        var httpRequest = $http({
            method: 'POST',
            url: '/echo/json/',
            data: mockDataForThisTest

        }).success(function(data, status) {
            $scope.people = data;
        });

    };

}

Answer 1

我让这个例子在这个小提琴中使用你的代码正常工作：http://jsfiddle.net/4w6Uv/3。我还使用一个简单的node.js服务器重复了这个例子，这次它通过将mockdata切换成一个直的数组来工作：

mockData = [{
    id: 1,
    firstName: "Peter",
    lastName: "Jhons"},
{
    id: 2,
    firstName: "David",
    lastName: "Bowie"}
];

还值得一提的是，在您的示例中实际上并不需要jQuery（除非您未提供的其他代码使用它）。你的帖子没有用Angular标记，这有助于获得更多答案。被调用的函数由Angular控制器提供，而不是与jQuery有任何关系（如果已经知道则道歉）。

Answer 2

快速检查显示您的成功功能永远不会被调用。你确定你能发帖到'/ echo / json /'吗？

在JSFiddle中使用Angular创建JSON表

2 个答案: