如何使用 AngularJS 使用 ng-bind 和 ng-repeat 显示答案

【问题标题】：How to display using ng-bind and ng-repeat using AngularJS如何使用 AngularJS 使用 ng-bind 和 ng-repeat 显示
【发布时间】：2014-08-19 20:45:01
【问题描述】：

我需要使用 ng-repeat 和 ng-bind 将数据显示到表格中，但我尝试过的没有显示任何数据，我尝试的代码哪里出错了？ HTML：

<tbody id="ngDowntimeBody">
<tr ng-repeat="previousdowntime in GetPreviousDowntimeEvents.PreviousDowntimeEvents">
     <td ng-bind="previousdowntime.CategoryId"></td>
      <td ng-bind="previousdowntime.StartTime"></td>
      <td ng-bind="previousdowntime.EndTime"></td>
      <td ng-bind="previousdowntime.Comment"></td>
 </tr>
</tbody>

JS：

function GetPreviousDowntimeEvents($http) {
     var self = this;

     self.PreviousDowntimeEvents = [];
     self.AjaxData = ngHesto.Ajax.Get($http
        , {
          url: PREVIOUS_DOWNTIME_EVENTS
          , success: function (data) {
           self.PreviousDowntimeEvents = data.data[0];
           console.log(self.PreviousDowntimeEvents);
            }
       });
 }

var ngAppModule = angular.module('myApp', []);
ngAppModule.controller('DowntimeController', ['$scope','$http', function ($scope, $http) {
    $scope.GetPreviousDowntimeEvents = new GetPreviousDowntimeEvents($http);  
}]);

数据不显示

这是我得到的回复：

{EventId: "10", DepartmentId: "7", CategoryId: "10", StartTime: "2014-08-19T10:00:00", EndTime: "2014-08-19T10:10:00",Comment:"Test"}

【问题讨论】：

您还可以发布示例响应吗？在这一行中分配的那个 self.PreviousDowntimeEvents = data.data[0];
因为当我使用一些示例数据运行此代码时，它的执行没有任何问题。这是我分配给我的测试的 - self.PreviousDowntimeEvents = [{'CategoryId' : 1, 'StartTime' : 'Today 1', 'EndTime' : 'Tomorrow 1', 'Comment' : 'Some cmets 1' }，{'CategoryId'：2，'StartTime'：'今天 2'，'EndTime'：'明天 2'，'Comment'：'Some cmets 2'}，{'CategoryId'：3，'StartTime'：'今天 3', 'EndTime' : '明天 3', 'Comment' : 'Some cmets 3'}];
我只需要将响应显示到表格中
为我工作。尝试jsfiddle.net/orj8wdps/1 - 在我看来，您实际上并没有将数组分配给self.PreviousDowntimeEvents，而是一个对象。试试self.PreviousDowntimeEvents = data.data 而不是self.PreviousDowntimeEvents = data.data[0]。
@Sergiu Paraschiv 非常感谢我没有意识到我必须删除 [0]

标签： javascript html ajax angularjs

【解决方案1】：

function GetPreviousDowntimeEvents($http) {
     var self = this;

     self.PreviousDowntimeEvents = [];
     self.AjaxData = ngHesto.Ajax.Get($http
        , {
          url: PREVIOUS_DOWNTIME_EVENTS
          , success: function (data) {
           self.PreviousDowntimeEvents = data.data;
           console.log(self.PreviousDowntimeEvents);
            }
       });
 }

var ngAppModule = angular.module('myApp', []);
ngAppModule.controller('DowntimeController', ['$scope','$http', function ($scope, $http) {
    $scope.GetPreviousDowntimeEvents = new GetPreviousDowntimeEvents($http);  
}]);

HTML

  <tbody id="ngDowntimeBody">
                       <tr ng-repeat="previousdowntime in GetPreviousDowntimeEvents.PreviousDowntimeEvents">
                       <td>{{previousdowntime.CategoryId}}</td>
                       <td>{{previousdowntime.StartTime}}</td>
                       <td>{{previousdowntime.EndTime}}</td>
                       <td>{{previousdowntime.Comment}}</td>
                   </tr>
              </tbody> 
         </table>

【讨论】：

【解决方案2】：

我猜你那里不需要这个新员工

而不是

ngAppModule.controller('DowntimeController', ['$scope','$http', function ($scope, $http) {
    $scope.GetPreviousDowntimeEvents = new GetPreviousDowntimeEvents($http);  
}]);

使用任一

ngAppModule.controller('DowntimeController', ['$scope','$http', GetPreviousDowntimeEvents]);

或者在你的 GetPreviousDowntimeEvents 函数中返回一些东西

function GetPreviousDowntimeEvents($http) {
 //...
  return self;
}

【讨论】：

这是不正确的，并没有解决他的真正问题。 GetPreviousDowntimeEvents 是一个“类”，他通过调用 new GetPreviousDowntimeEvents(...) 并将该实例放在 $scope 上来实例化。
@SergiuParaschiv 再次感谢嘿
@SergiuParaschiv：这是一个类 - 正确，但我认为没有必要，至少对于 sn-p。
如果你不打电话，就没有self.PreviousDowntimeEvents。