How to add dom element in my case

Question

I am trying to add an additional <tr> element when user click an link inside a td.

I have something like in 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>

so my actually html is like

<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

My goal is to put new new tr tag between two tr tag when user click a button so it will be like

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

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

I am not sure how to accomplish this by using directive. Any tips? Thanks a lot!

Do you just want to add a tr, or do you also want to display details about the selected item in that tr? — New Dev
– New Dev, Commented Jan 23, 2015 at 18:01

New Dev · Accepted Answer · 2015-01-23 18:28:16Z

You'd need to have a scope variable per test that holds which item was selected. If this variable is set, then show the details <tr>. You could set this in the 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 is actually not needed there, but I added it for clarity)

plunker

A better approach would probably be to add a property to the tests array itself or create a new array to hold the selected item for each test based on the index of the test (to which the item belongs) in the tests array.

It defines the boundaries of what will be repeated. Here you'd need both <tr>s to be repeated as a group for each test

Petr Averyanov · Accepted Answer · 2015-01-23 18:11:28Z

0

You do not need directive for this. Dont manipulate html when you dont need - let angular do it for you:

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

in controller:

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

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

answered Jan 23, 2015 at 18:11

Petr Averyanov

9,5963 gold badges25 silver badges41 bronze badges

Collectives™ on Stack Overflow

How to add dom element in my case

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related