如何在angularjs中以ng-grid显示json数据

时间:2014-04-21 06:50:04

标签: javascript json angularjs ng-grid

我是Angularjs的新手,我想通过使用ng-grid将网络服务响应中的JSON数据显示为网格形式。我的代码在这里

function TestController($scope, $http) {
alert("test");
$http({
      url: 'http://my_Personal_Url',
      method: "POST",
      data: postData,
      headers: {'Content-Type': 'application/jsonp'}
  }).success(function (data, status, headers, config) {
          $scope.persons = data; //  
      }).error(function (data, status, headers, config) {
          alert("test2");
          $scope.status = status;
      });

但是在上面的代码中没有定义PostData.my ng-grid scope就像这样

 $scope.gridOptions = { 
data: 'myData',
columnDefs: [
{field: 'DirectLine', displayName: 'DirectLine'},
{field:'Email', displayName:'Email'}
{field:'Employee', displayName:'Employee'}
{field:'Extention', displayName:'Extention'}
{field:'Id', displayName:'Id'}
{field:'PhoneNumber', displayName:'PhoneNumber'}
{field:'Title', displayName:'Title'}
]
 };

否则我如何从json对象获取数据到myData?所以我可以使用ng-grid作为

<div ng-controller="TestController">

    <div class="gridStyle" ng-grid="gridOptions"></div>
</div>

这是我的个人网址(这是保密的,所以我不想显示) 上面的代码有时会显示postData未定义,有时会出现405错误。

请解释使用plunker链接的问题

1 个答案:

答案 0 :(得分:3)

ng-grid中的“数据”属性接受数据对象的名称,在您的情况下,名称为“人员”,因为您的HTTP请求的响应转到$scope.persons

示例:

 $scope.gridOptions = { 
data: 'persons',
columnDefs: [
{field: 'DirectLine', displayName: 'DirectLine'},
{field:'Email', displayName:'Email'}
{field:'Employee', displayName:'Employee'}
{field:'Extention', displayName:'Extention'}
{field:'Id', displayName:'Id'}
{field:'PhoneNumber', displayName:'PhoneNumber'}
{field:'Title', displayName:'Title'}
]
 };

实例:http://plnkr.co/edit/UndbtO?p=preview