Angular - how to pass an ng model from ng-repeat to a function and to a scope

I have the following code:

<form ng-submit="addRow($index)">
    <input type="text" ng-repeat="column in table.columns" ng-model="column">
    <input type="submit" value="add row">
</form>

Live code here:

http://jsfiddle.net/muehvxx1/

What I'm trying to do is that whenever you click the Add Row button, a new object is added to the area (to the parent of the form), passing all the values ​​from the form fields.

So far, you can add an object to the correct parent object (which works), but it does not pass field values.

+4
source share
2 answers

You can do something like http://jsfiddle.net/9g8vpnaa/

HTML: Form

<form ng-submit="addRow(table)">
  <input type="text" ng-repeat="column in table.columns" ng-model="table.newItem[column]">
  <input type="submit" value="add row">
</form>

JS: addRow ()

$scope.addRow = function(table){
  table.items.push(table.newItem);
  table.newItem = {};
};
+4

newRow

    $scope.tables = [
        {name: 'tweets',
        columns: ['id', 'message', 'user'],
        items: [
            {id: 1, message: 'hello', user: 'mike'},
            {id: 2, message: 'hi', user: 'bob'},
            {id: 3, message: 'whatup', user: 'bob'}
        ],
         newRow :{}
        },
        {name: 'users',
        columns: ['id', 'username'],
        items: [
            {id: 1, username: 'mike'},
            {id: 2, username: 'bob'}
        ],
         newRow :{}
        }
    ];

<form ng-submit="addRow(table)">
    <input type="text" ng-repeat="column in table.columns" ng-model="table.newRow[column]" />
    <input type="submit" value="add row" />
</form>

, " "

    $scope.addRow = function(table){
        console.log($scope.id);
        table.items.push(table.newRow);
    };

JSFiddle

+2

All Articles