How to Iterate über Javascript Karte mit eckigen ng-repeat

Ich entwickle eine Angualr-Anwendung, wo wir ein Map Objekt haben (wie unten gezeigt). Der Schlüssel und der Wert des Kartenobjekt (headerObj) vom Benutzer als Eingabe für die Anwendung kommen,How to Iterate über Javascript Karte mit eckigen ng-repeat

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

I durch sie ist Iterieren foreach verwendet, wie unten gezeigt, wird der Ausgang wie erwartet kommenden

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

       });

aber ich habe diese Karte Werte in UI zeigen, was wiederum kann der Benutzer bearbeiten, so habe ich sie binded

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

ich habe goggled und versucht, mehrere Möglichkeiten, aber nichts tat h elp, also im Grunde wollte ich wissen, wie kann ich mit forEach in angular über die Karte iterieren?

Nur um mehr Klarheit zu geben, ist meine Anforderung etwa so: Ich brauche Werte, die als Schlüssel, Wertpaar an den Server übergeben werden, nur wenn ich nicht falsch liege, wenn ich Objekteigenschaften verwende, wird der Schlüssel des Objekts so etwas wie

befestigenden

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

aber mein Server erwartet etwas wie

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

eine plunkr bearbeiten Erstellt http://plnkr.co/edit/t2g6Dl831HGyjD6uSdf3?p=preview

Quelle

2014-12-20 Devi Kiran

nur eine Randnotiz: Sie sind sich bewusst, dass 'Map' ist ein ES6 Funktion nur vorhanden, auf modernster Browser ...? –

@ T.J.Crowder ja ich bin mir bewusst, ich verwende es in Chrome 39, die ECMA6 Funktionen unterstützt –

Ich würde davon ausgehen, dass Sie wie über Objekteigenschaften iterieren würden? – Eugene

-2

hier sind einige Änderungen in Ihrem Code. http://plnkr.co/edit/gpc1mPsZrl2QVXbnWZKA?p=preview

app = angular.module('testDemo', []); 

app.controller('submitCtrl',function($scope) { 
$scope.header={}; 
$scope.inputHeaders=[]; 

$scope.addHeader = function() { 

$scope.inputHeaders.push($scope.header); 
$scope.header = {}; 
$scope.header.key=''; 
$scope.header.value=''; 

} 

$scope.log=function(){ 
//alert('in log'); 
$scope.inputHeaders.forEach(function (key, value) { 
console.log(key, value); 
}); 
} 
});

HTML:

<body ng-controller='submitCtrl'> 
<div > 

<input type="text" class="=form-control" ng-model="header.key" placeholder="Key"> 
<input type="text" class="=form-control" ng-model="header.value" placeholder="value"> 
<button class="btn btn-sucess" ng-click="addHeader()">Add</button> 
<button class="btn btn-sucess" ng-click="log()">Log</button> 
<div> 
<ul class="list-group"> 
<li class="list-group-item" ng-repeat="header in inputHeaders"> 


<!-- need to to work on this logic --> 
<div ng-show="inputHeaders.length>=1"> 
<input type="text" ng-model="header.value" /> 
<input type="text" ng-model="header.key" /> 
</div> 

</li> 
</ul>    
</div> 

</div> 
</body>

Quelle

2014-12-20 19:06:20

nur sagen, "hier sind einige Änderungen" und nicht zu identifizieren, was diese Änderungen sind oder warum sie helfen, ist keine vernünftige Möglichkeit, eine Frage zu beantworten. Menschen sollten keine menschlichen Diff-Tools sein, um Ihre Lösungen zu sehen – charlietfl

-1. Die Frage bezieht sich speziell auf ein JavaScript-Map-Objekt, nicht auf das Binden an Objekte. Mehr zu Karten: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/map. – Uri

AngularJS 1.x nicht weiß, wie Javascript Iteratoren verwenden, so dass Sie das Map-Objekt in einem Array ersten Array.from() mit umwandeln müssen.

Controller:

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

Ausblick:

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

Quelle

2016-09-26 20:20:37

How to Iterate über Javascript Karte mit eckigen ng-repeat

Antwort

Verwandte Themen