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

Question

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

我恢复 JSON 正常，我只需要在单击按钮后让它显示在 table 中。

这里是JSON。这就是我要从我们的服务器获取它的方式，我不能添加任何 "var JSON =" 或向数据添加任何范围如“$scope.carrier”，除非有办法在之后添加它我已经获取了数据。

{
    "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"
    }
    ]
}

这里是 app.js 文件以恢复 JSON 数据：

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);
      });
  }
}]);

当然还有 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>

我也想知道是否可以使用 ng-grid 将其放入 table。我知道他们刚刚将其升级到 ui 网格，所以我不确定这是否仍然是一种可行的方法。

此外，我没有收到错误，数据现在不会显示在 table 中。我所知道的是它正确地返回数据，只是没有显示在 table.

感谢任何帮助。

Answer 1

您永远不会将返回数组的值赋给 $scope.carriers。

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

$scope.carriers = data.data;

这是更新后的 clickButton 函数（更改了变量名以减少混淆）：

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

Answer 2

我看了你的 plunker 好像你需要：

添加angular脚本
连接应用程序和控制器
你在转发器里的变量不对，我改一下

看看这个固定的插件：

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;  
      });
  }

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

trying to display json data with angularjs ng-repeat not working

javascript

json

angularjs

ng-repeat