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:
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
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);
};
+2