ng-Repeat="(key,val)" 不适用于 table in Angular

Question

我正在开发 MEAN 堆栈应用程序。我正在从数据库中获取值，在我的控制器中使用 $scope.varMap = new Map(); 创建一个地图，并尝试使用以下代码在我的 angular UI 中显示 varMap 的键值：

这就是我在控制器中设置值的方式：

 $scope.varMap.set($scope.mappings.name,$scope.mappings.shortname);

这是来自 angular 的代码片段：

   <table class="table table-bordered table-list">
        <thead>
           <tr>
             <th>KEY</th>
             <th>VALUE</th>
           </tr> 
        </thead>
        <tbody>
           <tr ng-repeat="(key,val) in varMap">
              <td>{{key}}</td>
              <td>{{val}}</td>
           </tr>
        </tbody>
</table>

但不幸的是 ng-repeat 没有显示任何内容。我尝试在控制器的控制台中打印地图值并打印正确的值。

     for (var [key, value] of $scope.varMap) {
        console.log(key + ' = ' + value);
     }

我尝试了 Whosebug 上可用的链接和答案，但没有成功。请帮忙。

Answer 1

由于 ng-repeat 不支持地图迭代，您可以使用自定义过滤器 fromMap，如下所示：

app.filter('fromMap', function() {
  return function(input) {
   var out = {};
   input.forEach((v, k) => out[k] = v);
   return out;
 }
});

和你的控制器：

app.controller('MainCtrl', function($scope) { 
  $scope.data = new Map(); 
  $scope.data.set("prop1","as"); 
  $scope.data.set("prop2","ssas"); 
});

和你的HTML：

  <body ng-controller="MainCtrl">
   <table>
    <tr ng-repeat="(key, val) in data | fromMap"><td>{{key}}</td><td>{{val}}</td></tr>
   </table>
  </body>

这是一个有效的 demo

ng-Repeat="(key,val)" 不适用于 table in Angular

ng-Repeat="(key,val)" not working for table in Angular

javascript

angularjs

mean-stack