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>。您可以在视图中设置它：

<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数组。

Answer 2

你不需要这个指令。当你不需要时不要操纵html - 让角为你做：

  <a href='' ng-click='open($parent.$index)'>{{item.name}}</a>

控制器中的

：

  $scope.open = function(index) {
    $scope.tests.splice(index + 1, 0, [{name : 'n'}, {name: 'p'}]);
  }

http://plnkr.co/edit/tpl:rfqcl9AHEoJZEEJxyNn2?p=preview

如何在我的情况下添加dom元素

2 个答案: