使用 ng-repeat 将数据从 GET 请求添加到 HTML 中的表

Question

我在向我的 HTML 中的表格添加行时遇到问题，该表格来自一个包含对象的数组。

当我运行我的代码时，我会像这样发出$get 请求：

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

app.controller('tableController', function($http){

    this.protocolList = [];

    // Initialise array 
    $http.get('../protocols').success(function(data) {
        console.log('Success ' + data);
        this.protocolList = data;
        angular.forEach(this.protocolList, function(value, key) {
              console.log(key + ': ' + value.id + ' - ' + value.name);
            });
    })
    .error(function(){
        console.log('Error ' + data)
    });
});

当我打开网络浏览器时，我看到以下内容：

当我尝试将其添加到我的 HTML 文件中的表格时，我的问题发生了：

<table class="table table-striped">
    <thead>

      <tr>
        <th ng-repeat="c in tctrl.currentDataObject.tableColumns"> {{ c }} </th>
      </tr>

      </thead>

      <!-- This does not ouput anything...-->
      <tbody>
        <tr ng-repeat="(key, value) in tctrl.protocolList">
          <td> {{ value }} </td>
        </tr>
     </tbody>

</table>

任何帮助将不胜感激。

Answer 1

你不需要像这样注入 $scope 来访问 DOM？？

app.controller('tableController', function($scope,$http){

我不确定它是否是隐式的。

Answer 2

试试这个简单的例子：

app.controller('tableController', ['$scope', '$http', function($scope, $http){

    $scope.protocolList = [];

    // Initialise array 
    $http.get('../protocols').success(function(data) {
        console.log('Success ' + data);        
        $scope.protocolList = data;
    })
    .error(function(){
        console.log('Error ' + data)
    });
}]);

HTML：

<table class="table table-striped">
    <thead>
      <tr>
        <th ng-repeat="c in tctrl.currentDataObject.tableColumns"> {{ c }} </th>
      </tr>

      </thead>

      <!-- This does not ouput anything...-->
      <tbody>
        <tr ng-repeat="item in protocolList">
          <td> {{ item.id }} </td>
          <td> {{ item.name }} </td>
        </tr>
     </tbody>