angular add/update json object from user input both attribute and value

Question

I am able to get both attribute name and value from user input

{{attribute}} and {{value}}

how do i add these to an existing json object

$scope.items ={
 name: peter,
 age: 16,
 {{attribute}}: {{value}}
}

is attribute also a user input? If yes then you can trigger a function using ng-change of the input field and set the attribute and value to the object. And if you already know the attribute use ng-model. — Manish
– Manish, Commented Sep 12, 2016 at 4:19
you could use $scope.items[$scope.attribute] = $scope.value but why you would want to do this I don't understand. — Claies
– Claies, Commented Sep 12, 2016 at 4:19
i am trying to create a user interface where user can create custom form, means they name their input field labels — Eric Ong
– Eric Ong, Commented Sep 12, 2016 at 8:10

Passersby · Accepted Answer · 2016-09-12 04:19:19Z

2

You could use bracket notation.

$scope.items[$scope.attribute] = $scope.value;

answered Sep 12, 2016 at 4:19

Passersby

1,20210 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eric Ong Over a year ago

Thanks! didnt know i can do that, great lesson

ngCoder · Accepted Answer · 2016-09-12 06:00:41Z

Here's the plunker for your problem statement,using ng-change I've called a function to create the JSON object dynamically when ever user changes anything in the input fields or form. Below is the look of the controller where we create the JSON object

var myApp = angular.module('Test', []);
myApp.controller('MainCtrl', ['$scope', function($scope) {

  $scope.input={};
  $scope.items={};
  $scope.createObj = function(){
    $scope.items['name'] = $scope.input.name;
     $scope.items['age'] = $scope.input.age;
  };

}]);

HTML will look like this:

<body ng-app="Test" ng-controller="MainCtrl">
    <h5>Name:</h5>
    <input type="text" ng-model="input.name" ng-change="createObj()"/>
    <h5>Age :</h5>
    <input type="text" ng-model="input.age" ng-change="createObj()"/>
    <pre>{{items}}</pre>
  </body>

Collectives™ on Stack Overflow

angular add/update json object from user input both attribute and value

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related