Question

我试图创建一个包含动态字段的表单来创建一个像这样发布的JSON

{
"cpu": "1",
"ram": "128",
"env": {
    "envname1": "value1",
    "envname2": "value2"
}
}

虽然我没有问题创建cpu和ram但我无法想出创建＆＃34; envname＆＃34;和＆＃34;价值＆＃34;因为envname应该在第一列的动态添加字段和第二列中的值。

我也无法将常规字段和动态字段放在一个范围内。

请查看http://jsfiddle.net/q9dcn7wj/3/ cpu和ram字段被忽略。当我改变

    $scope.inputs = [{id: 'choice1'}];

到

     $scope.inputs = {id: 'choice1'};

忽略动态字段。如何将范围内的所有内容提交为JSON？

Answer 1

您正在将inputs模型视为array和object。

我建议你在variables模型上创建一个input属性，然后推送/拼接。

我已更新了以下JSFiddle相关代码：

JavaScript ：

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

app.controller('MyCtrl', ['$scope', function ($scope) {
    $scope.inputs = { variable: [] };

$scope.addInput = function(){
    $scope.inputs.variable.push({name:'', value:''});
}

$scope.removeInput = function(index){
    $scope.inputs.variable.splice(index,1);
}
}]);

<强> HTML ：

<div ng-app="myApp" ng-controller="MyCtrl">

        <input type="text" ng-model="inputs.cpu" />cpu<br />
        <input type="text" ng-model="inputs.ram" />ram

    <div ng-repeat="input in inputs.variable">
        <input type="text" ng-model="input.name" />
        <input type="text" ng-model="input.value" />
        <button ng-click="removeInput($index)">Remove</button>
    </div>
    <button ng-click="addInput()">add input</button>
    <br />
<strong><label for="userDebugText">JSON:</label></strong>
<textarea id="userDebugText">{{inputs|json}}</textarea>
</div>

添加动态字段以创建特定的JSON格式

1 个答案: