在angularjs中为文本字段字符串创建动态对象答案

【问题标题】：creating dynamic objects for text field string in angularjs在angularjs中为文本字段字符串创建动态对象
【发布时间】：2017-09-05 01:17:08
【问题描述】：

我对angular js的看法如下，

<label class="control-label">Name:</label>
  <input type="text" class="form-control" ng-model="config.name" />
<br />

<label class="control-label">versionSpecificApiConfig:</label>
<input type="text" class="form-control" ng-model="config.versionSpecificApiConfig" />
<br />

<label class="control-label">schemaUrl:</label>
<input type="text" class="form-control" ng-model="config.versionSpecificApiConfig.schemaUrl" />
<br />

我这样做是因为我需要如下配置对象结构，

{
 "name":"string",
 "versionSpecificApiConfig":{
  "string":{
           "schemaUrl":"string"
           }
      }
  }

但出现错误“无法在 versionSpecificApiConfig 字段中设置字符串的属性”。请帮我创建这样的结构。（结构中的“字符串”是指特定文本框的相应值）。

【问题讨论】：

您的对象结构错误。试试这个： { "name":"string", "versionSpecificApiConfig":{ "string":{ "schemaUrl":"string" } } }
这将如何工作？输入框是文本，但您的 versionSpecificApiConfig 似乎是一个对象。
@Jenny 我怎样才能实现你所说的这样的对象结构。请帮忙
@swaroop sg 已发布答案请查看

标签： javascript angularjs string object

【解决方案1】：

你想要这样的东西吗？

var app= angular.module("app" , []);
app.controller('Ctrl', ['$scope', Ctrl]);
function Ctrl($scope){
 $scope.config = {};
 $scope.Print = function(){
     console.log($scope.config);
 }
};

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div ng-controller="Ctrl" ng-app="app">
<label class="control-label">Name:</label>
  <input type="text" class="form-control" ng-model="config.name" />
<br />

<label class="control-label">versionSpecificApiConfig:</label>
<input type="text" class="form-control" ng-model="config.versionSpecificApiConfig.string.schemaUrl" />
<br />

<label class="control-label">schemaUrl:</label>
<input type="text" class="form-control" ng-model="config.versionSpecificApiConfig.string.schemaUrl1" />
<br />

<button type="button" ng-click="Print()">Click to see object</button>
<br/>
{{config}}
</div>

【讨论】：

几乎是我正在寻找的答案。但结构中的“字符串”必须是 versionSpecificApiConfig 文本框值的值。
嘿，谢谢您的回复，但问题是我想要您在第一条评论中建议的结构。 versionSpecificApiConfig:{ "String" 这必须是 versionSpecificApiConfig 文本框的值。然后按照你的建议。@Jenny
@swaroopsg 我在编辑前的第一个答案是根据我的评论。
嘿，结构为，VersionSpecificApiConfig:{"string":{}} 像这样。我所说的“字符串”必须是插入文本框中的值。
是的..这和我评论的一样..但是你到底想要什么？

【解决方案2】：

我已经尝试过解决这个问题，它的工作很完美，请尝试一下，让我们知道。

<form ng-submit="func(config)">
        <label class="control-label">Name:</label>
          <input type="text" class="form-control" ng-model="config.name" />
        <br />

        <label class="control-label">versionSpecificApiConfig:</label>
          <input type="text" class="form-control" ng-model="config.versionSpecificApiConfig" />
        <br />

        <label class="control-label">schemaUrl:</label>
          <input type="text" class="form-control" ng-model="config.schemaUrl" />
        <br />

        <button type="submit"> Save </button>
      </form>

$scope.func = function(Obj){
      var keyObj = {};
      var versionObj = {};
      var data = {};

      var key = Obj.versionSpecificApiConfig;

      keyObj['schemaUrl'] = Obj.schemaUrl;

      versionObj[Obj.versionSpecificApiConfig] = keyObj;

      data['name'] = Obj.name;
      data['versionSpecificApiConfig'] = versionObj;
      console.log(data);
      var Json = JSON.stringify(data);
      console.log(Json);
    }

【讨论】：