我有一个简单的表单，其中有两个文本框，输入到框中的值使用 angularJS 显示在 div 中。我还有一个按钮，它使用 jQuery 将新行的两个文本框添加到表单中，这也为它们提供了 ng-model。
但是，这些新文本框无法将值分配给 div。有没有一种方法可以动态地向该表添加更多行并让它们工作？
HTML:
<table>
<tr>
<td><input type="text" ng-model="value1a"></td>
<td><input type="text" ng-model="value1b"></td>
</tr>
</table>
<input type="button" value="Add Row" name="addRow">
<div>
<p>{{value1a}} {{value1b}}</p>
</div>
jquery:
$(document).ready(function() {
var count = 2;
$('[name="addRow"]').click(function() {
$('.table tr:last').after('<tr></tr>');
$('.table tr:last').append('<td><input type="text" ng-model="value' + count + 'a"></td>');
$('.table tr:last').append('<td><input type="text" ng-model="value' + count + 'b"></td>');
$('.div').append('<p>{{value' + count + 'a}} {{value' + count +'b}}</p>');
count++;
});
});
我知道原因可能是因为 ng-model 需要从页面加载开始就可用才能工作，但如何添加这样的新行？
最佳答案
不要使用 jQuery，而是使用 ng-repeat directive添加模型定义的行:
angular.module("app",[])
.controller("ctrl", function($scope) {
var vm = $scope;
vm.rowList = [{valueA: "itemA", valueB: "itemB"}];
vm.addRow = function() {
vm.rowList.push({});
};
})<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ctrl">
<table>
<tr ng-repeat="row in rowList">
<td>{{$index}}</td>
<td><input type="text" ng-model="row.valueA"></td>
<td><input type="text" ng-model="row.valueB"></td>
</tr>
</table>
<input type="button" value="Add Row" name="addRow"
ng-click="addRow()">
<div>
<p ng-repeat="row in rowList">
row={{$index}} {{row.valueA}} {{row.valueB}}
</p>
</div>
</body>在上面的示例中，rowList 是一个对象数组。每个对象定义每行的模型。要添加新行，addRow 按钮使用 ng-click directive调用 addRow 函数，将新对象推送到 rowList 数组。
关于javascript - 动态添加新的 ng-model 到 angularJS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45464594/