To get the current row and its value in angularjs

Question

I am very new to angularjs.Please help me with editing and removing a row in angularjs. I have a dynamic table in which rows are inserted dynamically with 2 links in it(edit/delete). I want to edit the row when i click on the edit link.

HTML Code:

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

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

You can just refer to the "emp" that you use in your 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>

In your controller, you can then just:

  $scope.editEmployee = {}

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

 $scope.DeleteRow=function (employee) {

    //code to delete row
 }

In your "edit" table you have to change the ng-model references to "editEmployee.name", ... .

If you don't want that it updates it live, you can always use angular.copy(employee) & copy it back when clicking the save button. (But this probably requires your model to have an id so you can easily find it back in the original list)

Answer 2

Use $scope.employees[index].name for example. The $index you pass in, acts as the array index.

This means that when you use EditRow($index) in the view (html), you are saying that you want to run the EditRow function on the scope, and pass in the index value of the current ng-repeat element.

Answer 3

Try following:

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

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

$scope.DeleteRow=function (employee) {

  //code to delete row
}