Как использовать индекс каждого элемента, когда элемент записан в директиве?

Я просто хочу отметить, что это моя первая попытка создать простое приложение в AngularJS. У меня есть таблица, и в каждой строке я показываю задачу, которая содержит свойства Index, Name, Activity, Time, а также кнопки редактирования и удаления. Все работает идеально.

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

и директива:

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


};
});

Теперь у меня проблема, потому что индекс для каждой задачи равен 1, а также нажатие кнопки редактирования и удаления не работает. Возможно, мне нужно написать этот шаблон по-другому или попробовать другой подход.

Поэтому, если у кого-то есть какие-либо идеи, пожалуйста, не стесняйтесь добавлять комментарии. Спасибо.


angularjs angularjs-directive angularjs-ng-repeat
person Hank Mooody    schedule 10.03.2016    source источник
comment
Я попробовал это, и, к сожалению, в таблице сейчас ничего нет.   -  person Hank Mooody    schedule 10.03.2016

Ответы (2)


arrow_upward
0
arrow_downward

Вы также можете передать индекс своей директиве.

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

Затем вы можете получить к нему доступ, добавив его в область действия своей директивы:

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
    };
});
person Lex    schedule 10.03.2016
comment
Спасибо за ваш комментарий, эти функции при нажатии кнопки все еще не работают. - person Hank Mooody; 10.03.2016

arrow_upward
0
arrow_downward

Я нашел рабочее решение :) По-видимому, возникла проблема с чем-то, что называется «изолировать область» (не судите меня, если я неправильно использую некоторые термины, я совершенно новичок в Angular)

Итак, я удалил часть scope из директивы

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


    };
});

и сделал небольшое изменение в ng-repeater

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

И теперь отображаемый индекс отличается для каждого элемента, а также я могу использовать как кнопку редактирования, так и кнопку удаления.

person Hank Mooody    schedule 10.03.2016
comment
я думаю, что не нужно пробовать шаблон. вы можете удалить его. - person Hadi J; 10.03.2016