AngularJS JSON 使用 ng-click 从文件加载

Question

目前我想通过使用 Angular JS 解析文件中的 JSON 数据来显示 HTML table，但它不起作用，有人可以帮助我吗？

并且作为一个增强功能，我怎样才能获得 2 个不同 JSON 文件的 2 个 Div

HTML代码

<html>
    <div ng-controller="get_controller">
        <input type="text" ng-model="accountnumber" name="accountnumber" class="form-control search-query" placeholder="Enter Account Number">
        <span class="input-group-btn">
            <button type="submit" ng-click="geValues()" class="btn btn-primary">Submit</button>
        </span>
    </div>

    <div ng-controller="get_controller">
        <table>
            <tbody>
                <tr>
                    <th ng-repeat="list in personDetails">{{list.Name}}
                    </th>
                </tr>
                <tr>
                    <td class="features" ng-repeat="list in personDetails">{{list.Location}}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</html>

AngularJS代码

var app = angular.module('myApp', ["ngTable"]);
app.controller('get_controller', function ($scope, $http) {

  $scope.geValues =  function() {
        $http({method: 'POST', url: 'posts.json'}).success(function(data) {
            $scope.post = data;
            $scope.personDetails = Employee;
             })
    },
});

posts.json（Json 文件）

{
  "Employee": [
    {
      "Name": "Rocky",
      "Location": "Office"
    },
    {
      "Name": "John",
      "Location": "Home"
    }
  ]
}

Answer 1

应该是 GET 请求，您还需要从包含 Employee 数组的响应对象访问数据。代码应该是，

$http.get('test.json').then(function (response){
  $scope.post = response.data;
  $scope.personDetails = response.data.Employee;
});

如果您希望它在 ng-click 上发生，请将调用放在一个函数中，

  $scope.geValues = function() {
      $http.get('test.json').then(function(response) {
        $scope.post = response.data;
        $scope.personDetails = response.data.Employee;

      });
    }

DEMO

AngularJS JSON 使用 ng-click 从文件加载

AngularJS JSON load from file with ng-click

json

angularjs

angularjs-ng-click

ng-view

ng-controller