使用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"];