尝试使用angularjs ng-repeat显示json数据无效

I've seen so many ways to do this, but most are pretty old and I want to make sure I'm doing this correctly. Right now, the way I'm using isn't working and I feel like I'm missing something.

我已经看到了很多这样做的方法，但是大多数都很老了，我想确保我做的是正确的。现在，我使用的方法不起作用，我觉得我错过了一些东西。

I'm getting the JSON back fine, I just need to get it to display in a table after I click the button.

我可以很好地返回JSON，我只需要在单击按钮后将其显示在表中。

Here is the JSON. This is how I'm going to get it from our server, I can't add any "var JSON =" or add any scope like "$scope.carrier" to the data, unless there's a way to add it after I've fetched the data.

这是JSON。这就是我如何从服务器获得它的方法，我不能添加任何“var JSON =”或添加任何范围，如“$scope”。"传送"到数据，除非有办法在我获取数据后添加。

{
    "carrier": 
    [
        {
        "entity": "carrier",
        "id": 1,
        "parentEntity": "ORMS",
        "value": "Medica"
    }, {
        "entity": "carrier",
        "id": 2,
        "parentEntity": "ORMS",
        "value": "UHG"
    }, {
        "entity": "carrier",
        "id": 3,
        "parentEntity": "ORMS",
        "value": "Optum"
    }, {
        "entity": "carrier",
        "id": 4,
        "parentEntity": "ORMS",
        "value": "Insight"
    }, {
        "entity": "carrier",
        "id": 5,
        "parentEntity": "ORMS",
        "value": "Insight"
    }
    ]
}

Here is the app.js file to bring back the JSON data:

以下是返回JSON数据的app.js文件:

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

app.controller('myController', ['$scope', '$http', function($scope, $http) {
var url = 'test.json';
  $scope.clickButton = function() {
    $http.get(url).success(function(data) {
        console.log(data);
      });
  }
}]);

And then of course the HTML:

当然还有HTML

<div class="col-lg-12 text-center">
             <button type=button class="btn btn-primary load" ng-click="clickButton()">Click!</button>
         <table class="">
             <tbody ng-repeat="carrier in carriers">
                <tr>
                    <td>
                        <h3 class="">{{ module.entity }}</h3>
                        <h3 class="">{{ module.id }}</h3>
                        <h3 class="">{{ module.parentEntity }}</h3>
                        <h3 class="">{{ module.value }}</h3>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

I'm also wondering if I can use the ng-grid to put this in a table. I know they just upgraded it to ui grid so I'm not sure if this is still a feasible approach.

我还想知道我是否可以使用ng-grid将它放到一个表中。我知道他们刚把它升级到ui网格，所以我不确定这是否可行。

Also, I'm not getting errors, the data just won't display in the table right now. All I know is its returning the data properly, just not displaying in the table.

而且，我没有得到错误，数据现在不会显示在表中。我所知道的是它正确地返回数据，只是不显示在表中。

Any help is appreciated.

任何帮助都是感激。

2 个解决方案

#1

I looked at your plunker seems like you need to:

我看了看你的柱塞似乎你需要:

add angular script
添加角脚本
wire the app and the controller
连接应用程序和控制器
your variable in the repeater is wrong, I change it
中继器中的变量是错误的，我修改它

take a look to this fixed plunker:

看看这个固定柱塞:

http://plnkr.co/edit/TAjnUCMOBxQTC6lNJL8j?p=preview

 $scope.clickButton = function() {
     $http.get(url).success(function(returnValue) {
         alert(JSON.stringify(returnValue.carrier));
         $scope.carriers = returnValue.carrier;  
      });
  }

#2

You never assign the value of the returned array to $scope.carriers.

您永远不会将返回的数组的值分配给$scope.载波。

At the line where you say console.log(data); add this:

在你说console.log(data)的那一行;添加:

$scope.carriers = data.data;

Here is the updated clickButton function (with a variable name change to reduce confusion):

这里是更新的clickButton函数(使用变量名称更改来减少混淆):

$scope.clickButton = function() {
  $http.get(url).success(function(returnValue) {
    $scope.carriers = returnValue.data;
  });
};

#1