javascript - 如何在我的例子中添加 dom 元素

Question

我正在尝试添加一个额外的 <tr>当用户单击 td. 内的链接时的元素

我有类似 html 的内容

<tr ng-repeat="test in tests">
    <td ng-repeat="item in test">
        <a item-detail href='' ng-click='open()'>{{item.name}}<a>
    </td>
</tr>

所以我实际上的 html 是这样的

<tr>
    <td><a item-detail href='' ng-click='open()'>1</a></td>
    <td><a item-detail href='' ng-click='open()'>2</a></td>
    <td><a item-detail href='' ng-click='open()'>3</a></td>
    <td><a item-detailhref='' ng-click='open()'>4</a></td>
</tr>
<tr>
    <td><a item-detail href='' ng-click='open()'>5</a></td>
    <td><a item-detail href='' ng-click='open()'>6</a></td>
    <td><a item-detail href='' ng-click='open()'>7</a></td>
    <td><a item-detail href='' ng-click='open()'>8</a></td>
</tr>
…more

我的目标是在两个 tr 之间放置新的新 tr 标签当用户单击按钮时标记，因此它会像

//click any of link here inside a td, add new tr next to it
<tr>
    <td><a item-detail href='' ng-click='open()'>1</a></td>  
    <td><a item-detail href='' ng-click='open()'>2</a></td>
    <td><a item-detail href='' ng-click='open()'>3</a></td>
    <td><a item-detail href='' ng-click='open()'>4</a></td>
</tr>
<tr><td colspan="4">Newly added</td></tr> <- add one if I click 1,2,3,4
<tr>
    <td><a item-detail href='' ng-click='open()'>5</a></td>
    <td><a item-detail href='' ng-click='open()'>6</a></td>
    <td><a item-detail href='' ng-click='open()'>7</a></td>
    <td><a item-detail href='' ng-click='open()'>8</a></td>
</tr>
<tr><td colspan="4">Newly added</td></tr> <- add one if I click 5,6,7,8

我的js

angular.module('myApp').directive('itemDetail', function() {
        return {
            restrict: 'A',
            link: function(scope, elem) {
                var html = '<tr><td> newly added </td></tr>'
                elem.bind('click', function() {
                    //not sure what to do here. there is no closet method in Jquery lite
                })         
            }
        };
    }
);

我不确定如何通过使用指令来完成此任务。有小费吗？非常感谢!

Answer 1

您需要有一个范围变量 test包含 item被选中。如果设置了此变量，则显示详细信息 <tr> 。您可以在 View 中设置它:

<tr ng-repeat-start="test in tests" ng-init="selectedItem = null">
    <td ng-repeat="item in test">
        <a href='' ng-click='$parent.selectedItem = item'>{{item.name}}<a>
    </td>
</tr>
<tr ng-repeat-end ng-if="selectedItem">
    <td colspan="4">Details of: {{selectedItem}}</td>
</tr>

(实际上不需要ng-init，但为了清楚起见我添加了它)

plunker

更好的方法可能是将属性添加到 tests数组本身或创建一个新数组来根据 tests 中测试(项目所属)的索引来保存每个测试的选定项目。数组。