与动态表和angularjs的双向数据绑定？

Question

我正在创建一个表格，我将在其中创建动态行。每次用户单击按钮时，都会创建一个新行，如下所示：

第二列将包含产品数量。因此，我想使用bg-model和ng-bind对第二列中的所有值进行求和以使用双向数据绑定显示它们。因此，当用户输入一个时，valus将自动更新。我对此一无所知，因为行是动态的！

对于固定数量的元素，它可以工作，但我不知道动态生成。救命？

Answer 1

我们需要初始设置一个要使用的对象，并且可能会放入一些示例数据

change

由于Angular使用数据绑定的方式，我们可以将表行的ng-repeat绑定到包含所有值的数组：

 $scope.ourTableArray = [];
 $scope.ourTableArray.push({'textColumn': 'example text', 'valueColumn': 10});

接下来我们需要一种添加行的方法，所以我们可以通过创建一个从某个按钮调用ng-click的函数来实现。这将按照我们硬编码的第一个示例值中使用的格式填充<tr ng-repeat="row in ourTableArray"> <td><input type="text" ng-model="row.textColumn"</td> <td><input type="number" ng-model="row.valueColumn"</td> </tr> 。

$scope.ourTableArray

现在设置了ng-repeat，我们只需要一种计算值的方法。解决方法是创建一个函数来从我们的对象中总结我们的$scope.addRow = function(){ $scope.ourTableArray.push({'textColumn': '', 'valueColumn': 0}); } ：

valueColumn

要输出新的总数，我们所要做的就是在我们的页面中调用此函数。

$scope.calculateTotal = function() {
   var count = 0;
   for(row in $scope.ourTableArray){
      count += $scope.ourTableArray[row].valueColumn;
   }
   return count;
}

总结：就像我上面所说的，因为我们将ng-repeat绑定到我们的数组，只要我们修改数组（通过添加行，删除行，编辑行值），它将立即反映出来在表内。另外，由于我们正在输出Current Total of 2nd column: {{calculateTotal()}} 函数的结果，因此只要我们修改数组中的一个值，它也会随时更改。

Codepen Example

Answer 2

我认为您可以创建一个包含ID，名称和值的对象表，以及一个将范围上的新数据添加到其中的函数。然后，在控制器中，您可以添加简单地对所有值求和的函数以及将按ID编辑对象的函数。

接下来，此表中的ng-repeat将其显示在视图中。 对于ng-repeat中的所有输入，使用sum和edit添加函数。

我在我的一个项目中做过这个，但即使它有效，我也不会想到应该怎么做。如果你愿意，你可以试试。