AngularJS creating json from ng-repeat

Question

Inspired from this codepen I used a JSON file to load some basic input fields and toggles. When the user change something and press save, I would like to save these new property values in a new JSON object with same property names.

My code looks the this

JS

.controller('page', function($scope, templateSettingsFactory, savedSettingsFactory) {
  $scope.template = templateSettingsFactory;    
  $scope.saved = savedSettingsFactory;    
  $scope.saveSettings = function(){                                  
                              var temp = $scope.template;
                              var jsonObj = {};
                              for(var key in temp){
                                jsonObj[key]=temp[key];
                              }
                              $scope.saved.$add(jsonObj);
                        };
});

HTML

<label ng-repeat="item in template">
     <input type="text" placeholder="{{item}}">
</label>

<button class="button" ng-click="saveSettings()">Save</button>

The problem is that calling the saveSettings() don't get the updated property values of $scope.template - perhaps it's not doing two-way binding?

tommybananas · Accepted Answer · 2016-05-17 22:31:41Z

1

You need to use ng-model on your form elements to bind their input to the scope.

<input type="text" ng-model="item.property">

Here is an example of binding to a single object with arbitrary keys:

  <div ng-repeat="(key,value) in template">
    <div>{{key}}</div>
   <input type="text" ng-model="template[key]"/>
  </div>

https://docs.angularjs.org/api/ng/directive/ngModel

edited May 17, 2016 at 22:31

answered May 17, 2016 at 22:16

tommybananas

5,7361 gold badge31 silver badges52 bronze badges

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

5 Comments

tommybananas Over a year ago

It really all depends on your json input. stackoverflow.com/a/13715352/580487

Norfeldt Over a year ago

it's not an array of objects that my ng-repeat loops through, it's just all the property names in the object and their values.

tommybananas Over a year ago

i've updated my example to show binding to one object with arbitrary keys

Norfeldt Over a year ago

The (key, value in template seems to work... but have a strange behavior of making the placeholder the actual input value

Norfeldt Over a year ago

Thank you very much for the swift answer

Collectives™ on Stack Overflow

AngularJS creating json from ng-repeat

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related