Creating model from multiple models in AngularJS

Question

I have this basic fiddle which is a cut down version of what I have on my site.

I was wondering if there is a way to bind the table rows dynamically to a text area to create a ng-model composed of serveral other ng-model data?

I would like to to have each line in a list or something which I could then add additional text to from a text input element and have that all bound to a text area. Changes to either would be reflected in the form preview.

Is this possible?

Answer 1

First, there was a tiny mistake in your fiddle, requestQty should be an object indexed by itemId, or an array where the index is the item id, but as is it is a mix of both.

Now regarding your question, you could indeed keep a binding between a textarea and your model, bu not directly with ng-model since the textarea deals with a string, and your data is object.

One way to work around that is having two different variables, a model object and a stringModel string, and keep both synchronized using custom $watchers.

You can see an implementation of that solution here:

http://jsfiddle.net/dscace5q/1/

$scope.$watch('model', function(m) {
    $scope.stringModel = angular.toJson(m, 2);
}, true);

$scope.$watch('stringModel', function(s) {
    $scope.model = angular.fromJson(s);      
});