How to display key value pair and add fields during onclick using angularjs

Question

I need to display the object key and value in the fields. If user clicks on add button the new row of fields need to be added and able to insert values.

Initially,

var response =  {
  "json": {
    "response": {
      "data": [
        {
          "numbersUrlList": {
            "urlList": {
              "1": "http://www.press1.wav",
              "2": "http://www.press2.wav",
              "3": "http://www.press3.wav",
              "4": "http://www.press4.wav",
              "5": "http://www.press5.wav",
              "6": "http://www.press6.wav"
            }
          }
        }
      ]
    }
  }
}

When click on submit need to create a json as below.

var request = {
  "json": {
    "request": {
      "data": [
        {
          "numbersUrlList": {
            "urlList": {
              "1": "http://www.press1.wav",
              "2": "http://www.press2.wav",
              "3": "http://www.press3.wav",
              "4": "http://www.press4.wav",
              "5": "http://www.press5.wav",
              "6": "http://www.press6.wav",
              "7": "http://www.press7.wav",
              "8": "http://www.press8.wav"
            }
          }
        }
      ]
    }
  }
}

I have also created a fiddle. http://jsfiddle.net/6Texj/292/

Answer 1

You can just change the numberlist in the response to get the desired json output onsubmit.

 var myApp = angular.module('myApp', ['ui.bootstrap']); myApp.controller('myController', function($scope) { $scope.countBlocks = 0; $scope.numberlist = []; $scope.onload = function() { $scope.response = { "json": { "response": { "data": [{ "numbersUrlList": { "urlList": { "1": "http://www.press1.wav", "2": "http://www.press2.wav", "3": "http://www.press3.wav", "4": "http://www.press4.wav", "5": "http://www.press5.wav", "6": "http://www.press6.wav" } } }] } } }; $scope.numberlist = $scope.response.json.response.data[0].numbersUrlList.urlList; }; //adding new row for number list url $scope.addnumberlist = function() { var index = parseInt(Object.keys($scope.numberlist)[Object.keys($scope.numberlist).length - 1]); //console.log($scope.numberlist); //console.log(typeof($scope.numberlist)); debugger $scope.isCollapsed = true; $scope.displayremovebutton = true; $scope.numberlist[index + 1] = "http://www.press" + (index + 1) + ".wav"; }; $scope.removenumberlist = function(index) { //console.log($scope.numberlist); debugger delete $scope.numberlist[parseInt(index)]; }; $scope.submit = function() { // Request need to be created after adding url for 7 and 8 $scope.response.json.response.data[0].numbersUrlList.urlList = $scope.numberlist; console.log($scope.response) } $scope.onload(); }); 

 body { width: 98%; } .option { width: 30%; } .option1 { width: 10%; } .option2 { width: 20%; } .option3 { width: 10%; } .form-control5 { width: 125%; height: 34px; margin-right: 80px; padding: 6px 10px; font-size: 14px; line-height: 1.42857143; color: #555; background-image: none; border: 1px solid #ccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"/> <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.4.0.js"></script> <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet"/> <div ng-app="myApp"> <div ng-controller="myController" class="row-fluid"> <!-- START $scope.[model] updates --> <table class="table"> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> <td class="fieldname"><b>Numbers Url List</b> </td> <td> <div ng-show="!isCollapsed[$index]" ng-repeat="(key, value) in numberlist" style="margin-bottom: 10px;"> <div class="row col-sm-2" style="margin-bottom: 10px;"> <input type="text" name="count" class="form-control5" autocomplete="off" id="urlListNumber_{{$index}}" value="{{key}}" style="width: 100%; margin-right: 0px;"> </div> <div class="col-sm-10" style="margin-bottom: 10px;"> <input type="text" name="count" class="form-control5" autocomplete="off" id="numbersUrlList_{{$index}}" style="width: 120%;margin-right: 0px;" value={{value}}> </div><a href ng-click="removenumberlist(key)" ng-if="displayremovebutton">Remove</a> </div> </td> <td no-repeat> <button class="btn btn-primary" ng-click="addnumberlist()" style="float: right;">add</button> </td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <button class="btn btn-primary" ng-click="submit()" style="float: right;">submit</button> </tr> </tbody> </table> <!-- END TABLE --> </div> </div> 

Answer 2

In the answer provided by @Stark Buttowski, removeItem function will not work correctly. Following id the proper implementation of the same:

In the view(send the key to be removed instead of the index of the key),

<input type="text" name="count" class="form-control5" autocomplete="off" id="numbersUrlList_{{$index}}" style="width: 120%;margin-right: 0px;" value={{value}}></div><a href ng-click="removenumberlist(key)" ng-if="displayremovebutton">Remove</a></div>

In the controller, use delete to remove the key received,

$scope.removenumberlist = function(key) {
        console.log(key);

        delete $scope.numberlist[key];
    };