javascript - 如何使用 angular ng-repeat 遍历 javascript Map

Question

我正在开发一个 Angualr 应用程序，我们有一个 Map 对象(如下所示)。 map 对象 (headerObj) 的键和值来自用户作为应用的输入，

  var headerObj = new Map();
  headerObj.set(key,value);

我正在使用 foreach 遍历它们，如下所示，输出符合预期

           $scope.inputHeaders.forEach(function (headerkey, headervalue) {
                     console.log(headerkey, headervalue; 

                });

但是我必须在 UI 中显示这个 map 值，用户可以再次编辑，所以我绑定(bind)了它们

          <li class="list-group-item" ng-repeat="header in inputHeaders">
              <div ng-repeat="(key, value) in header">
                  {{key}} : {{value}}
             </div>
          </li>

我用谷歌搜索并尝试了几种方法，但没有任何帮助，所以基本上我想知道如何使用 forEach 在 angular 中迭代 map ？

只是为了更清楚地说明我的要求是这样的:我需要将值作为键值对传递给服务器，前提是我没记错，假设如果我使用对象属性，对象的键将修复类似

       {"key":"Content-Type","value":"application/x-www-form-urlencoded","$$hashKey":"003"}]

但是我的服务器期待类似的东西

        "Content-Type" => "application/x-www-form-urlencoded"

创建了一个 plunkr 编辑 http://plnkr.co/edit/t2g6Dl831HGyjD6uSdf3?p=preview

Answer 1

AngularJS 1.x 不知道如何使用 Javascript 迭代器，因此您必须先使用 Array.from() 将 Map 对象转换为数组。 .

Controller :

$scope.inputHeadersArray = Array.from($scope.inputHeaders);

查看:

<li class="list-group-item" ng-repeat="header in inputHeadersArray">
  {{header[0]}} : {{header[1]}}
</li>