如何在 angularjs 中使用 ng-repeat 遍历 JavaScript Maps? [英] How to iterate through JavaScript Maps using ng-repeat in angularjs?

问题描述

我正在尝试在 ng-repeat angular 指令中使用 JavaScript Maps在搜索时，我发现可以通过这种方式完成:

<li ng-repeat='(key, value) in {"First Name":"John", "Last Name":"Smith"}'><span>键:{{key}}，值:{{value}}</span>

但这仅适用于普通的 JSON 对象，当我按照以下方式创建真正的 Map 时，它不起作用.

例如我有这个控制器

function MyCtrl($scope) {$scope.items = new map();$scope.items.set('adam',{'age':10,'fav':'doogie'});$scope.items.set('amalie',{'age':12});}

和这个 html 代码

<span>键:{{key}}，值:{{value}}</span>

解决方案

由于 ng-repeat 不支持 Map 迭代，你可以使用自定义过滤器 fromMap 如下图

angular.module('app', []).filter('fromMap', function() {返回函数(输入){无功输出 = {};input.forEach((v, k) => out[k] = v);返回;};}).controller('ctrl',function ($scope) {$scope.items = new Map();$scope.items.set('adam',{'age':10,'fav':'doogie'});$scope.items.set('amalie',{'age':12});$scope.logAdamAge = function() { console.log($scope.items.get("adam").age) };});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><div ng-app="app" ng-controller="ctrl"><div>带地图</div><ul><li ng-repeat="(key, value) in items | fromMap"><div>{{key}}</div><div ng-repeat="(k, v) in value">{{k}}: <input ng-model="value[k]"/></div><pre>{{items |fromMap}}</pre><button ng-click="logAdamAge()">从地图记录亚当年龄</button>

I'm trying to use JavaScript Maps in ng-repeat angular's directive while searching I found that it could be done this way :

<ul ng-controller="MyCtrl">
    <li ng-repeat='(key, value) in {"First Name":"John", "Last Name":"Smith"}'>
        <span>Key: {{key}}, value: {{value}}</span>
    </li>
</ul>

but this works only with normal JSON objects, when I create a real Map the following way, it doesn't work.

I have this controller for example

function MyCtrl($scope) {
    $scope.items = new map();
    $scope.items.set('adam',{'age':10,'fav':'doogie'});
    $scope.items.set('amalie',{'age':12});
}

and this html code

<ul>
    <li ng-repeat='(key, value) in items'>
        <span>Key: {{key}}, value: {{value}}</span>
    </li>
</ul>

解决方案

since ng-repeat not support Map iteration, you could use a custom filter fromMap like below

angular.module('app', []).filter('fromMap', function() {
  return function(input) {
    var out = {};
    input.forEach((v, k) => out[k] = v);
    return out;
  };
}).controller('ctrl',function ($scope) {
    $scope.items = new Map();
    $scope.items.set('adam',{'age':10,'fav':'doogie'});
    $scope.items.set('amalie',{'age':12});
    
    $scope.logAdamAge = function() { console.log($scope.items.get("adam").age) };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div>with Map</div>
  <ul>
    <li ng-repeat="(key, value) in items | fromMap">
      <div>{{key}}</div>
      <div ng-repeat="(k, v) in value">{{k}}: <input ng-model="value[k]" /></div>
    </li>
  </ul>
  <pre>{{items | fromMap}}</pre>
  <button ng-click="logAdamAge()">log Adam age from Map</button>
</div>

这篇关于如何在 angularjs 中使用 ng-repeat 遍历 JavaScript Maps?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！