[英]ng-Repeat=“(key,val)” not working for table in Angular
我正在开发MEAN堆栈应用程序。 我正在从数据库中获取值,使用$scope.varMap = new Map();
创建一个Map $scope.varMap = new Map();
在我的控制器中,并尝试使用以下代码在我的角度UI中显示varMap的键值:
这就是我在控制器中设置值的方式:
$scope.varMap.set($scope.mappings.name,$scope.mappings.shortname);
这是角度的代码片段:
<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);
}
我尝试了stackoverflow上可用的链接和答案,但没有成功。 请帮忙。
由于ng-repeat
不支持Map迭代,因此您可以使用来自map的自定义过滤器,如下所示:
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>
这是一个工作演示
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.