采用NG-重复更新引导与动态实时数据angularjs表 [英] Update bootstrap angularjs table with real time data on the fly using ng-repeat

问题描述

我使用与NG-重复填充表自举表。
问题是，我不能让表更新和显示数据。

我已经写了阻力，在我angularjs下降元素。有一次，我拖动并在其拖放某些文件，我得到的信息早在我的控制器。

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

问题是，我在我的控制器得到该文件详细

  $ scope.getFiles =功能（RES）
     {
        $ scope.fileList =资源;
        的console.log（RES）;
     }
 

在HTML

 ＆LT;文件拖放取档案=的GetFiles＆GT;＆LT; /文件拖放＆GT;
 

在这里的GetFiles在函数获取调用在控制器和returing的value.while我做CONSOLE.LOG和dragand下降，我可以看到对象在控制台中。

但是，当我分配此

  $ scope.fileList =资源;
 

在HTML

 ＆LT;表类=表的表冷凝＆GT;
 ＆LT;＆THEAD GT;
      ＆所述; TR＆GT;
        ＆LT;第i个姓名和LT; /第i
        ＆LT;第i个类型＆lt; /第i
        ＆LT;第i尺寸和LT; /第i
        ＆LT;第i最后修改＆LT; /第i
      ＆LT; / TR＆GT;
  ＆LT; / THEAD＆GT;
  ＆LT;＆TBODY GT;
      ＆LT; TR NG重复=文件中的fileList＆GT;
        ＆所述; TD＆GT; {{file.name}}＆下; / TD＆GT;
        ＆所述; TD＆GT; {{file.type}}＆下; / TD＆GT;
        ＆所述; TD＆GT; {{file.size}}＆下; / TD＆GT;
        ＆所述; TD＆GT; {{file.lastModified}}＆下; / TD＆GT;
      ＆LT; / TR＆GT;
   ＆LT; / TBODY＆GT;
＆LT; /表＆gt;
 

和使用NG-再说一遍，我没有看到任何在HTML调用它。
在该指令中的值[推入一个数组和previous下降的信息存储，除非刷新浏览器。

我怎么能实时更新表。
我的目标是结构如下

  [{名：Topic_modelling.xlsx，键入：应用程序/ vnd.openxmlformats-officedocument.s preadsheetml.sheet，规格：39274，上次更改时间：周一至八月2015年03格林尼治标准​​时间13时四十分53秒+ 0530（IST）}]
 

解决方案

这是因为要更换整个对象。

角度是看previous之一，您可以通过

在此改变

$ scope.fileList =资源;

最简单的认为使用控制器控制器的语法，所以你的对象将被视为模板属性。

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

所以，您的控制器将成为

  ...
this.getFiles =功能（RES）
     {
        this.fileList =资源;
        的console.log（RES）;
     }
 

和模板

 ＆LT; D​​IV NG控制器=NameOfController为fileCtrl...＆LT; TR NG重复=文件中fileCtrl.fileList＆GT;
 

在fileCtrl对象的角度看属性，而不是原始值

i am using bootstrap table with ng-repeat to populate the table. the issue is that i cannot get the table updated and display data.

i have written drag and drop element in my angularjs. once i drag and drop some file over it i get that information back in my controller.

this drag and drop is a custom directive.

the problem is that i am getting the file detail in my controller

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

In HTML

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

where getFiles is the function getting called in the controller and returing the value.while i do console.log and dragand drop i can see Object in the console.

But when i assign this

$scope.fileList = res;

In 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>

and call this in html using ng-repeat i do not see anything. In the directive the values are [pushed in an array and previous drop info is stored unless browser is refreshed.

how can i update table in real time. My Object struct is as below

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

解决方案

This happens because you are replacing whole object.

Angular is watching the previous one, which you overide by

$scope.fileList = res;

Easiest think is using "controller as" syntax of controllers so your object will be taken as property in template.

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

So your controller would become

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

and template

<div ng-controller="NameOfController as fileCtrl"

...

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

after that angular watch property of fileCtrl object and not the primitive value

这篇关于采用NG-重复更新引导与动态实时数据angularjs表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！