Question

我需要有关angularjs代码的帮助。问题是，在我的表格行中，我有“编辑”按钮，因此，如果单击“编辑行”，则希望下面表格中显示的行数据进行编辑。请我如何完成Angularjs代码以完成这项工作。我包括了一些代码。

HTML

<div ng-controller="nerDev as div1">
    <table>
        <tr>
            <th>S/N</th>
            <th>FName</th>
            <th>LName</th>
        </tr>
        <tr ng-repeat="mywrk in employees | filter:search">
            <td>{{ $index + 1 }}</td>
            <td>{{mywrk.fname}}</td>
            <td>{{mywrk.lname}}</td>
            <td><input type="button" class="btn btn-secondary"
                ng-model="row.clk" ng-click="EditRow()" value="Edit"/></td>
        </tr>
    </table>
</div>
<div class='col-sm-12'>
    <form method="post" novalidate autocomplete="off">
        <div class="form-group">
            <label>FName:</label> <input type="text" class="form-control"
                ng-model="edit.fname" ng-required="true">
        </div>
        <div class="form-group">
            <label>LName</label> <input type="text" class="form-control"
                ng-model="edit.lname" ng-required="true">
        </div>
        <input class="btn btn-secondary" type="submit" value="Update">
        <input class="btn btn-secondary" type="submit" value="Cancel">
    </form>
</div>

JavaScript

var app = angular.module("myApp", ['ngRoute', 'ngResource' ]);
app.controller('MainCtrl', ['$scope','$filter', function ($scope, $filter){

  $scope.employees = [
    { 'fname': 'Kelly', 'lname': 'Bob'},
    { 'fname': 'Jay', 'lname': 'White'}
  ];

}]);

Answer 1

在您的编辑按钮中，只需将对象传递给函数即可

ng-click="EditRow(mywrk)"

然后在您的控制器中，只需添加该函数并将已传递的对象分配给$scope.edit对象，就像这样

$scope.edit = {}; //you need to initialize this first to prevent error
$scope.EditRow = function(item) {
  $scope.edit = item;
}

您完成了。

Answer 2

@JKAlombro的回答是一种方法。换句话说，您可以通过$index来获取它。

在按钮单击事件中，您需要传递行索引

ng-click="EditRow($index)"
在控制器端

$scope.edit = {}; $scope.EditRow = function(index) { $scope.edit = $scope.employees[index]; }

如何将表行数据发送到表单输入以在angularjs中进行编辑

2 个答案: