AngularJS

Question

在检查了各种 Whosebug 资源之后，我似乎仍然无法弄清楚 Angular 执行此操作的方法。 HTML table，它只有一个 Id 列和另一个文本列（输入框），通过 ng-repeat 动态填充。然后我为输入框中显示的每个单独记录提供 "update" 和 "delete" functions/buttons。 'Delete' 函数似乎没问题，在 'delete' 按钮上单击我只是将 ID 作为参数传递给函数。对于 'update' 单击事件，我不确定如何将输入框的值作为第二个参数传递给函数。请参阅下面的简化标记和代码。

<tr ng-repeat="rec in allRecords">
    <td>{{rec.Id}}</td>
    <td>
        <button ng-click="update(rec.Id, HERE_TEXT_FROM_SIBLING_INPUT')">Update</button>
        <input type="text" value="{{rec.Name}}">
        <button ng-click="deleteMonitorGroup(rec.Id)">Delete</button>
    </td>

和控制器

app.controller('MyCtrl', function (MyService, $scope) {

MyService.listAllRecords(function (allRecs) {
    $scope.allRecords= allRecs;
});

$scope.update = function (Id, text) {

        MyService.update(Id, text, function () {
           // update record
        });
}

});

感谢任何帮助。

Answer 1

在像 ng-model="rec.Name" 这样的输入字段上使用 ng-model，它通过 angular 双向绑定 feature.Then 来保持 rec.Name 更新 ng-model的 rec.Name 到更新的函数或而只是在函数调用时传递 rec 对象以使其更简单。

标记

<tr ng-repeat="rec in allRecords">
    <td>{{rec.Id}}</td>
    <td>
        <button ng-click="update(rec)">Update</button>
        <input type="text" ng-model="rec.Name">
        <button ng-click="deleteMonitorGroup(rec.Id)">Delete</button>
    </td>
</tr>

AngularJS - 单击按钮时动态 table 更新输入框的值

AngularJS - update value of input box in a dynamic table on button click

angularjs-ng-repeat

ng-repeat

angularjs-ng-click