如何使用每个项目的索引时，项目是写在指令？ [英] How to use index of each item when item is written in directive?

问题描述

我只是想指出，这是建立在 AngularJS 简单的应用程序。我有一个表，并且在每行，我的任务显示我第一次尝试这包含索引，名称，活动时间属性，还可以编辑和删除buttons.Everything正在完善。

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>

指数对我来说很重要，因为我被索引访问当前任务单击编辑或删除按钮时。
现在，我想修改我的code，我读指令，并有主意，把一切从表行成模板里面的指令，并且比调用该指令在 NG-重复。
事情是这样的：

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，还可以编辑和删除按钮点击不工作。也许我必须写这个模板不同，或者尝试其他的方法。

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.

因此​​，如果任何人有任何想法，请随时添加comment.Thank你。

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

推荐答案

我已经找到工作液:)显然，有东西问题称为孤立范围（不判断我，如果我不使用一些长期的正确，我完全新的角）

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


    };
});

和取得了NG-中继微小的变化

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 .

这篇关于如何使用每个项目的索引时，项目是写在指令？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！