How to use index of each item when item is written

Question

I just want to point out that this is my first attempt to create simple app in AngularJS.I have a table , and in each row I'm displaying task which contains Index,Name,Activity,Time properties and also edit and delete buttons.Everything is working perfect.

<table   class="table table-striped " style="width: 100%">

<tr ng-repeat="task in tasks" >
    <td>{{$index}}</td>
    <td>{{task.name}}</td>
    <td>{{task.activity}}</td>
    <td>{{task.time}}</td>
    <td ><button type="button" ng-click="editRow($index)" class='btn btn-default '>Edit</button></td>
    <td ><button type="button" ng-click="removeRow($index)" class='btn  btn-default'>Delete</button></td>
</tr>

Index is very important to me ,because I'm accessing current task by index when edit or delete button is clicked. Now, I'm trying to modify my code, I'm reading directives, and had idea to put everything from table row into a template inside directive, and than to call that directive in ng-repeat. Something like this :

<tr ng-repeat="task in tasks" task-item = "task" >
</tr>

and directive :

app.directive('taskItem',  function() {

return {
    scope:{
        taskItem: '='
    },
    restrict: 'A',
    template: "<tr><td>{{$index}}</td>" +
    "<td>{{taskItem.name}}</td>" +
    "<td>{{taskItem.activity}}</td>" +
    "<td>{{taskItem.time}}</td>" +
    "<td><button type='button' ng-click='editRow($index)' class='btn btn-default '>Edit</button></td>" +
    "<td><button type='button' ng-click='removeRow($index)' class='btn  btn-default'>Delete</button></td>"+
    "</tr>",
    replace: false


};
});

Now I have issue , because index for each task is 1 and also edit and delete button click is not working .Maybe I have to write this template different, or try other approach.

So if anyone has any idea, please feel free to add comment.Thank You.

Answer 1

I've found working solution :) Apparently , there was a problem with something called "isolate scope" (don't judge me if I'm not using some of term correctly , I'm completely new to Angular )

So , I've removed scope part from directive

app.directive('taskItem',  function() {

return {
    restrict: 'A',
    template: "<tr><td> {{$index}} </td>" +
    "<td>{{task.name}}</td>" +
    "<td>{{task.activity}}</td>" +
    "<td>{{task.time}}</td>" +
    "<td><button type='button' ng-click='editRow($index)' class='btn btn-default '>Edit</button></td>" +
    "<td><button type='button' ng-click='removeRow($index)' class='btn  btn-default'>Delete</button></td>"+
    "</tr>",
    replace: false


    };
});

and made minor change in ng-repeater

<tr ng-repeat="task in tasks" task-item >
</tr>

And now , index displayed is different for each item, and also I can use both edit and delete button .

Answer 2

You can also pass in the index to your directive.

<tr ng-repeat="task in tasks" task-item="task" index="$index"></tr>

Then you can access that by adding it to the scope of your directive:

app.directive('taskItem',  function() {
    return {
        scope:{
            taskItem: '=',
            index: '@'
        },
        restrict: 'A',
        template: "<tr><td>{{index}}</td>" +
        "<td>{{taskItem.name}}</td>" +
        "<td>{{taskItem.activity}}</td>" +
        "<td>{{taskItem.time}}</td>" +
        "<td><button type='button' ng-click='editRow(index)' class='btn btn-default '>Edit</button></td>" +
        "<td><button type='button' ng-click='removeRow(index)' class='btn  btn-default'>Delete</button></td>"+
        "</tr>",
        replace: false
    };
});