Question

我只是想指出，这是我第一次尝试在AngularJS中创建简单的应用。我有一个表，在每一行中我都显示包含索引，名称，活动的任务，时间属性以及编辑和删除按钮。一切都很完美。

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

索引对我来说非常重要，因为我在点击编辑或删除按钮时按索引访问当前任务。现在，我试图修改我的代码，我正在阅读指令，并且想要将表行中的所有内容放入template内部指令，而不是在{{1}中调用该指令}}。像这样：

ng-repeat

和指令：

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

现在我有问题了，因为每个任务的索引是1，而且编辑和删除按钮点击不起作用。也许我必须写这个模板不同，或尝试其他方法。

所以，如果有人有任何想法，请随时添加评论。谢谢。

Answer 1

您也可以将索引传递给您的指令。

<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
    };
});

Answer 2

我找到了工作解决方案:)显然，有一个叫做“隔离范围”的问题（如果我没有正确使用某些术语，请不要判断我，我对Angular完全不熟悉）< / p>

所以，我已从指令

中删除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>

现在，每个项目显示的索引都不同，我也可以使用编辑和删除按钮。

在指令中写入项目时如何使用每个项目的索引？

2 个答案: