Ended up doing this way, by adding a button:
<div ng-repeat="(key, val) in test.testConfig.environment">
<div class="controls">
<input class="keyvalueeditor-key ui-autocomplete-input"
type="text" id="key" value="{{key}}">
<input class="keyvalueeditor-key ui-autocomplete-input"
type="text" id="val" value="{{val}}">
<button type="button" ng-click="removeEnvironment(key)"
>-</button>
</div>
</div>
<div class="controls">
<input class="keyvalueeditor-key ui-autocomplete-input"
type="text" id="key" placeholder="KEY" ng-model="newEnvironment.key">
<input class="keyvalueeditor-key ui-autocomplete-input"
type="text" id="val" placeholder="VALUE" ng-model="newEnvironment.val">
<button type="button" ng-click="addEnvironment(newEnvironment)"
>+</button>
</div>
On Monday, June 2, 2014 2:38:59 AM UTC-7, Radkri wrote:
>
> Let's say I have a json response that I want to bind to a form that looks
> like the following with dynamic fields, how can bind using ng-model in such
> cases so I don't have to reconstruct the object again?
>
> <div ng-repeat="(key, val) in test.testConfig.environment">
> <div class="controls">
> <input class="span3" type="text" id="key" value="{{key}}"
> *ng-model=?????*
> >
> <input class="span3" type="text" id="val" value="{{val}}"
> *ng-model=?????*
> >
> </div>
> <div>
> some new key, val runtime after *page loads ?????* where
> I don't know the key,val in test.testConfig.environment
> </div>
> </div>
> And then what if there are new field runtime, say below I want to create a
> new key, val pair?
>
>
> ```json
> *"test":*
> {
> "testId": "889d6d32-3159-41cd-b636-be75ddf43abc",
> "testName": "testName",
> "testType": "REST",
> *"testConfig": {*
> "testId": "889d6d32-3159-41cd-b636-be75ddf43abc",
> "url": "http://ocalhost:8080/foo/bar;";,
> "httpMethod": "POST",
>
>
>
> *"environment": { "test": "test_value", "URL": "dev_host" },*
> "headers": {
> "Content-Type": "application/json",
> "Accept": "application/xml"
> },
> "inputBody": "{ \"array\": [ 1, 2, 3 ], \"boolean\":
> true, \"null\": null, \"number\": 123, \"object\": { \"a\": \"b\",
> \"c\": \"d\", \"e\": \"f\" }, \"string\": \"Hello World\"}",
> "outputBody": null,
> "assertions": {
> "boolean": "true",
> "array": "[1,2,3]"
> }
> }
> }
> ```
>
> ```xml
> <div class="control-group">
> <label class="control-label" for="testName">Test Name</label>
>
> <div class="controls">
> <input type="text" id="testName" ng-model="test.testName"
> placeholder="Test Name" required min="2">
> </div>
> </div>
>
> <!-- environment -->
> <div class="control-group">
> <label class="control-label" for="suiteId">Environment</label>
>
> <div ng-repeat="(key, val) in test.testConfig.environment">
> <div class="controls">
> <input class="span3" type="text" id="key" value="{{key}}"
> >
> <input class="span3" type="text" id="val" value="{{val}}"
> >
> </div>
> </div>
> </div>
>
> <!-- URL and post/get type -->
> <div class="control-group">
> <div class="controls">
> <label class="control-label" for="suiteId">URL</label>
> <label class="control-label" for="suiteId">Type</label>
> </div>
> <div class="controls">
> <input type="text" id="testName" ng-model="test.testConfig.url"
> placeholder="URL" required min="2">
> <input type="text" id="testName"
> ng-model="test.testConfig.httpMethod"
> placeholder="URL" required min="2">
> </div>
> </div>
>
> <!-- Headers -->
> <div class="control-group">
> <label class="control-label" for="suiteId">Headers</label>
>
> <div ng-repeat="(key, val) in test.testConfig.headers">
> <div class="controls">
> <input class="span3" type="text" id="key" value="{{key}}"
> >
> <input class="span3" type="text" id="val" value="{{val}}"
> >
> </div>
> </div>
> </div>
> ```
>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
