很难给出最好的方法。可能取决于您的风格和喜好。但这里有一种方法可以让你继续前进。
定义您的模型。它将包含绑定到表单的声明和添加的声明数组。
$scope.viewModel = {
claim: {},
claims: []
};
添加一个为声明对象分配默认值的函数：
var resetClaim = function() {
$scope.viewModel.claim = {
name: '',
city: ''
};
};
resetClaim();
表单元素将使用ng-model:
<input type="text" model="viewModel.claim.name">
我们将使用ng-repeat 来显示添加的声明：
<tr ng-repeat="claim in viewModel.claims">
我们的表单将有两个按钮：
<button type="submit" ng-click="saveClaim()">Save Claim</button>
<button type="button" ng-click="cancel()">Cancel</button>
取消按钮只会重置表单。
saveClaim 函数将如下所示：
$scope.saveClaim = function() {
if (!isValidClaim()) return;
$scope.viewModel.claim.id ? updateClaim() : saveNewClaim();
resetClaim();
};
isValidClaim 函数只是检查我们是否输入了所需的字段。您可以为此使用表单验证。
在此解决方案中，当保存声明时，它可能是新声明，也可能是我们已编辑的现有声明，并且在这两种情况下我们将执行的操作会有所不同，因此我们需要一种方法来说明我们正在执行的操作。这里我们只检查它是否有一个id。如果没有 - 这是一个新的声明。如果有，那就是现有的。
要保存新的声明，我们将执行以下操作：
var saveNewClaim = function() {
var newClaim = angular.copy($scope.viewModel.claim);
newClaim.id = id++;
$scope.viewModel.claims.push(newClaim);
};
请注意，我们使用 angular.copy 来创建绑定到视图的声明的新副本非常重要。否则，我们只会将对同一对象的引用推送到 claims 数组，这不好，因为我们想重置其中一个。
在此示例中，id 只是一个从 0 开始的变量，我们每次创建新声明时都会递增该变量。
ng-repeat 中的每个元素都有一个编辑和删除图标：
<tr ng-repeat="claim in viewModel.claims">
<th>{{claim.id}}</th>
<td>{{claim.name}}</td>
<td>{{claim.city}}</td>
<td><i class="glyphicon glyphicon-edit" ng-click="editClaim(claim)"></i></td>
<td><i class="glyphicon glyphicon-remove" ng-click="removeClaim(claim)"></i></td>
</tr>
removeClaim 函数只接受一个声明并将其从数组中删除：
$scope.removeClaim = function(claim) {
var index = $scope.viewModel.claims.indexOf(claim);
$scope.viewModel.claims.splice(index, 1);
};
editClaim 函数将复制声明以进行编辑并将其放入绑定到表单的变量中：
$scope.editClaim = function(claim) {
$scope.viewModel.claim = angular.copy(claim);
};
您还可以执行以下操作：
$scope.viewModel.claim = 声明；
当您在表单中编辑声明时，它会同时在ng-repeat 中更新。但是你没有很好的取消方法，也不需要保存按钮。所以这取决于你希望它如何工作。
如果您现在在表单中编辑声明并保存，我们将返回saveClaim 函数：
$scope.saveClaim = function() {
if (!isValidClaim()) return;
$scope.viewModel.claim.id ? updateClaim() : saveNewClaim();
resetClaim();
};
这次声明将有一个 id，所以updateClaim 函数将执行：
var updateClaim = function() {
var claim = $scope.viewModel.claims.filter(function(c) {
return c.id === $scope.viewModel.claim.id;
})[0];
angular.extend(claim, $scope.viewModel.claim);
};
它将根据 id 从声明数组中检索我们正在编辑的声明。我们需要这样做，因为我们之前使用了angular.copy，并且有两个不同的对象。
然后我们将使用angular.extend 将所有新编辑的值移动到我们在ng-repeat 中按下编辑的声明。
演示： http://plnkr.co/edit/yuNcZo7nUyxVsOyPTBEd?p=preview