Angular - 如何将 ng-model 从 ng-repeat 传递给函数和作用域

Question

我有以下代码：

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

此处为实时代码：

http://jsfiddle.net/muehvxx1/

我想要做的是，每当您单击 "Add Row" 按钮时，都会将一个新对象添加到范围（到表单的父对象）中，传递表单字段中的所有值。

到目前为止，您可以将对象添加到正确的父对象（有效），但它不会传递字段的值。

Answer 1

我在您的所有表格中添加了新行对象

    $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>

然后您只需在用户单击时将该对象添加到项目中 "Add Row"

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

JSFiddle

Answer 2

你可以这样做 http://jsfiddle.net/9g8vpnaa/

HTML: 表格

<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: 添加行()

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

Angular - 如何将 ng-model 从 ng-repeat 传递给函数和作用域

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

angularjs

angularjs-directive

angularjs-scope

angularjs-ng-repeat

angular-ngmodel