html - 在angularjs中获取当前行及其值

Question

我是 angularjs 的新手。请帮助我编辑和删除 angularjs 中的一行。我有一个动态表，其中的行是动态插入的，其中有 2 个链接(编辑/删除)。我想在单击编辑链接时编辑该行。

HTML代码:

 <div ng-controller="EmpDetCtrl">
        <table ng-model="Employee" border="1">
            <thead>
                <tr>
                    <th>Name</th><th>Project</th><th></th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="emp in employees">
                    <td>{{emp.name}}</td>
                    <td>{{emp.project}}</td>
                    <td><a href="#" ng-click="EditRow($index);">Edit</a>&nbsp &nbsp<a href="#" ng-click="DeleteRow($index);">Delete</a> </td>
                </tr>
            </tbody>
        </table>


        <table>
            <tr>
                <td>
                    <label class="table_label">Name:</label></td>
                <td>
                    <input type="text" ng-model="name" class="textbox" /></td>
                <td>
                    <label class="table_label">Project:</label></td>
                <td>
                    <input type="text" ng-model="project" class="textbox" /></td>
            </tr>
        </table>

            <button ng-model="save" class="save_buttons" ng-click="addNew()">Save</button>
 </div>

AngularJs 代码:

function EmpDetCtrl($scope)
{

   $scope.employees = [{ name: 'A', project: 'B'}];


   $scope.addNew = function () 
    {
         $scope.employees.push({
            name: $scope.name,
            desg: $scope.desg,
        });
     }


$scope.EditRow=function (index) {

    var empname = $scope.employees.name; ------Not sure.. plz help me here to get the row
    alert(empname);

}

$scope.DeleteRow=function (index) {

   //code to delete row
 }
}

Answer 1

您可以只引用您在 ng-repeat 中使用的“emp”。

        <tbody>
            <tr ng-repeat="emp in employees">
                <td>{{emp.name}}</td>
                <td>{{emp.project}}</td>
                <td><a href="#" ng-click="EditRow(**emp**);">Edit</a>&nbsp &nbsp<a href="#" ng-click="DeleteRow(**emp**);">Delete</a> </td>
            </tr>
        </tbody>

在你的 Controller 中，你可以:

  $scope.editEmployee = {}

    $scope.EditRow=function (employee) {
        $scope.editEmployee = employee;
     }

 $scope.DeleteRow=function (employee) {

    //code to delete row
 }

在您的“编辑”表中，您必须将 ng-model 引用更改为“editEmployee.name”，...。

如果您不希望它实时更新，您可以随时使用 angular.copy(employee) 并在单击保存按钮时将其复制回来。 (但这可能需要您的模型有一个 ID，以便您可以轻松地在原始列表中找到它)