简体   繁体   English

ng-Repeat =“(key,val)”不适用于Angular中的表格

[英]ng-Repeat=“(key,val)” not working for table in Angular

i am working on a MEAN stack application. 我正在开发MEAN堆栈应用程序。 I am fetching values from database, creating a Map using $scope.varMap = new Map(); 我正在从数据库中获取值,使用$scope.varMap = new Map();创建一个Map $scope.varMap = new Map(); in my controller and trying to show the key,value of varMap in my angular UI using following code: 在我的控制器中,并尝试使用以下代码在我的角度UI中显示varMap的键值:

This is how I am setting value in controller: 这就是我在控制器中设置值的方式:

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

and this is code snippet from 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>

but unfortunately the ng-repeat is not showing anything. 但是很遗憾, ng-repeat没有显示任何内容。 I tried printing the map values in console in my controller and its printing proper values. 我尝试在控制器的控制台中打印地图值,并打印适当的值。

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

I tried the links & answers available on stackoverflow but no success. 我尝试了stackoverflow上可用的链接和答案,但没有成功。 Please help. 请帮忙。

Since ng-repeat not support Map iteration, you could use a custom filter fromMap like below : 由于ng-repeat不支持Map迭代,因此您可以使用来自map的自定义过滤器,如下所示:

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

and your controler : 和您的控制者:

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

and your HTML: 和您的HTML:

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

Here is a working demo 这是一个工作演示

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM