使用angularjs動態創建鍵值對並將其傳遞給java地圖

Question

我在前端有兩個空的文本框，其中一個用於鍵值，另一個用於添加按鈕和一個提交按鈕。用戶可以單擊添加按鈕以分別添加一對兩個文本框，每個文本框分別代表鍵和值。

用戶可以在文本框中隨意添加任何文本作爲關鍵字和任何文本作爲值。 提交按鈕是提交最終表格。 我想在angularJS中獲取這些數據，並通過post請求將其傳遞給java Map。

具體來說，Java中的Map看起來像這樣轉換爲Json。

{"A":"something","B":"something","C":"something","D":"value"} 

但我不能從前端使用angularJS動態地創建這樣的結構。

Answer 1

由於您需要映射鍵和值，我不會推薦數組。 我覺得這是你所需要的：

$scope.map={}; 
// Add header data 
$scope.addToMap=function() 
{ 
    $scope.map[$scope.key]=$scope.value; 
    $scope.key=""; //clear the textbox 
    $scope.value=""; //clear the textbox 
}; 

執行addToMap()點擊您的按鈕時。您還可以與非可編輯的文本框的ng-repeat，並運行ng-repeat上map

Answer 2

試試這個 這裏是工作fiddle

<div ng-controller="MyCtrl"> 
<div ng-repeat="item in items"> 
<input type="text" ng-model="item"> 
</div> 
    <button ng-click="addItem()">Add</button> 
    </div> 

控制器

var myApp = angular.module('myApp',[]); 
myApp.controller('MyCtrl',function($scope){ 
    $scope.items=['item1','item2','item3','item4','item5']; 

    $scope.addItem = function(){ 
    $scope.items.push(''); 
    } 
}) 

Answer 3

嘗試下面的代碼創建動態的JSON對象。

var myApp = angular.module('myApp',[]); 
 

 
myApp.controller('MyCtrl', ['$scope', function MyCtrl($scope) { 
 
\t $scope.jsonObject = {}; 
 
    
 
    $scope.add = function(){ 
 
    \t $scope.jsonObject[$scope.key] = $scope.value; 
 
    }; 
 
    
 
    $scope.submitForm = function(){ 
 
    \t console.log($scope.jsonObject);  
 
    } 
 
}]);

<div ng-controller="MyCtrl"> 
 
    <form> 
 
    Key: <input ng-model="key"> 
 
    Value: <input ng-model="value"> 
 
    <button ng-click="add()">ADD</button> 
 
    <button ng-click="submitForm()">submit form</button> 
 
    </form> 
 
    
 
    <span>{{jsonObject}}</span> 
 
</div>

Answer 4

入住這Plunker http://plnkr.co/edit/sgKYtxFGL1JyrVFMkQM4?p=info

$scope.name = {"A":"something","B":"something","C":"something","D":"value"}; 

$scope.example = $scope.name["A"];