2014-12-20 11 views
6

का उपयोग कर जावास्क्रिप्ट मानचित्र पर Iterate कैसे करें मैं एक Angualr अनुप्रयोग विकसित कर रहा हूं जहां हमारे पास Map ऑब्जेक्ट है (जैसा कि नीचे दिखाया गया है)। कुंजी और नक्शा वस्तु (headerObj) अनुप्रयोग के लिए इनपुट के रूप में उपयोगकर्ता से आ रहे हैं के मूल्यकोणीय एनजी-दोहराने

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

मैं जैसा कि नीचे दिखाया उन के माध्यम से पुनरावृत्ति कर रहा हूँ foreach का उपयोग कर, उत्पादन की उम्मीद के रूप में आ रहा है

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

       }); 

लेकिन मैं यूआई, जो फिर से उपयोगकर्ता संपादित कर सकते हैं में इस नक्शे मूल्यों को दिखाने के लिए है, तो मैं उन्हें

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

आबद्ध है मैंने goggled और कई तरीके की कोशिश की, लेकिन कुछ भी ज किया elp, तो मूल रूप से मैं जानना चाहता था कि मैं कोणीय में प्रत्येक के लिए मानचित्र का उपयोग कैसे कर सकता हूं?

बस अधिक स्पष्टता देने के लिए मेरा पुनर्मूल्यांकन कुछ ऐसा है: मुझे कुंजी, मूल्य जोड़ी के रूप में सर्वर को पास करने के लिए मूल्यों की आवश्यकता है, केवल अगर मैं गलत नहीं हूं, तो मान लीजिए कि क्या मैं ऑब्जेक्ट गुणों का उपयोग करता हूं, ऑब्जेक्ट की कुंजी

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

की तरह कुछ तय किया लेकिन अपने सर्वर बनाया गया

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

की तरह कुछ उम्मीद कर रही है यहाँ http://plnkr.co/edit/t2g6Dl831HGyjD6uSdf3?p=preview

+2

बस एक ओर ध्यान दें: आप जानते हैं अत्याधुनिक ब्राउज़रों पर कि 'Map' एक ES6 सुविधा केवल मौजूद है रहे हैं ...? –

+0

@ टी.जे.क्रॉडर हाँ मुझे पता है, मैं क्रोम 39 में इसका उपयोग कर रहा हूं जो ईसीएमए 6 फीचर्स –

+0

का समर्थन करता है, मुझे लगता है कि आप ऑब्जेक्ट गुणों की तरह पुनरावृत्ति करेंगे? – Eugene

उत्तर

-2

एक plunkr संपादित करें आपके कोड में कुछ बदलाव हैं। 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> 
+0

की आवश्यकता होने पर आमतौर पर केवल मैपिंग नहीं करते हैं, बस कह रहे हैं कि 'यहां कुछ बदलाव हैं' और यह नहीं पहचानते कि क्या परिवर्तन हैं या वे क्यों मदद करते हैं, किसी प्रश्न का उत्तर देने का उचित तरीका नहीं है। आपके समाधान – charlietfl

+2

-1 देखने के लिए लोगों को मानव diff उपकरण नहीं होना चाहिए था। सवाल विशेष रूप से जावास्क्रिप्ट मानचित्र ऑब्जेक्ट के बारे में है, न कि ऑब्जेक्ट्स को बाध्य करने के तरीके पर। मानचित्र पर अधिक: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/map। – Uri

0

AngularJS 1.x कैसे जावास्क्रिप्ट iterators उपयोग करने के लिए है, तो आप किसी सरणी पहले Array.from() उपयोग करने के लिए मानचित्र वस्तु कन्वर्ट करने के लिए होगा पता नहीं है।

नियंत्रक:

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

दृश्य:

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