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

你可以参考＆＃34; emp＆＃34;你在ng-repeat中使用的。

        <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>

在你的控制器中，你可以只是：

  $scope.editEmployee = {}

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

 $scope.DeleteRow=function (employee) {

    //code to delete row
 }

在你的＆＃34;编辑＆＃34;表必须将ng-model引用更改为＆＃34; editEmployee.name＆＃34;，...。

如果您不希望它实时更新，您可以随时使用angular.copy（员工）＆amp;单击“保存”按钮将其复制回来。（但这可能要求你的模型有一个id，所以你可以很容易地在原始列表中找到它）

Answer 2

例如，使用$scope.employees[index].name。您传入的$index充当数组索引。

这意味着当您在视图（html）中使用EditRow($index)时，您表示要在作用域上运行EditRow函数，并传入当前ng-repeat的索引值元件。

Answer 3

请尝试以下操作：

<a> contantent</a>
$scope.editEmployee = {}

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

$scope.DeleteRow=function (employee) {

  //code to delete row
}

获取当前行及其在angularjs中的值

3 个答案: