使用 ng-repeat 使用实时数据更新 bootstrap angularjs 表

Question

我正在使用带有 ng-repeat 的引导表来填充表。 问题是我无法更新表格并显示数据。

我已经在我的 angularjs 中编写了拖放元素。一旦我将一些文件拖放到它上面，我就会在我的控制器中获得该信息。

这个拖放是一个自定义指令。

问题是我在控制器中获取文件详细信息

 $scope.getFiles = function(res)
     {
        $scope.fileList = res;
        console.log(res);
     }

在 HTML 中

<file-drop fetch-files="getFiles"></file-drop>

其中 getFiles 是在控制器中调用并返回值的函数。当我执行 console.log 并拖放时，我可以在控制台中看到 Object。

但是当我分配这个时

$scope.fileList = res;

在 HTML 中

<table  class="table table-condensed" >
 <thead>
      <tr>
        <th>Name</th>
        <th>Type</th>
        <th>Size</th> 
        <th>Last Modified</th>
      </tr>
  </thead>
  <tbody>
      <tr ng-repeat="file in fileList">
        <td>{{file.name}}</td>
        <td>{{file.type}}</td>
        <td>{{file.size}}</td>
        <td>{{file.lastModified}}</td>
      </tr>
   </tbody> 
</table>

并使用 ng-repeat 在 html 中调用它，我什么也没看到。 在指令中，这些值 [推入一个数组并存储先前的放置信息，除非刷新浏览器。

如何实时更新表格。 我的对象结构如下

[{name: "Topic_modelling.xlsx", type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", size: 39274, lastModified: Mon Aug 03 2015 13:40:53 GMT+0530 (IST)}]

Answer 1

发生这种情况是因为您要替换整个对象。

Angular 正在监视前一个，您将其覆盖

$scope.fileList = res;

最简单的想法是使用控制器的“控制器作为”语法，因此您的对象将被视为模板中的属性。

https://docs.angularjs.org/api/ng/directive/ngController

所以你的控制器会变成

... 
this.getFiles = function(res)
     {
        this.fileList = res;
        console.log(res);
     }

和模板

<div ng-controller="NameOfController as fileCtrl"

...

<tr ng-repeat="file in fileCtrl.fileList">

在 fileCtrl 对象的 angular watch 属性之后，而不是原始值