Angularjs add element to DOM when clicking

Question

I want to create a table which contains dynamic Content. When clicking on an element, the Details should Show up in the next line. So i creatied the following:

<table ng-controller="TestCtrl">
    <tr ng-repeat-start="word in ['A', 'B', 'C']">
        <td><!-- Some Information, Image etc --></td>
        <td ng-click="showDetails(word)">{{word}}</td>
    </tr>

    <!-- This is only visible if necessary -->
    <tr ng-repeat-end ng-show="currentDetail == word">
        <td colspan="2" ng-attr-id="{{'Details' + word}}"></td>
    </tr>
</table>

And I have the following js code:

angular.module('maApp', []).controller("TestCtrl", function($scope, $document, $compile){
    $scope.showDetails = function(word){
        var target = $document.find("Details" + word);

        //I checked it - target is NOT null here

        //target.html("<div>Test</div>");
        //target.append("<div>Test</div>");
        var el = $compile("<div>Test</div>")($scope);
        target.append(el);

        //Show tr
        $scope.currentDetail = word;
    };
});

I also tried the commented Solutions above but nothing of it works (The tr is showing up however). I guess there is something wrong with $document.find("Details" + word) but I don't know what.

Ultimately I want to add an <iframe> and the source would contain the word.

Does anybody see what I'm doing wrong here?

Fissio · Accepted Answer · 2015-11-19 13:43:40Z

1

No need for weird non-angulary DOM manipulation: All you need is this.

HTML:

<table ng-controller="TestCtrl">
    <tr ng-repeat-start="word in ['A', 'B', 'C']">
        <td><!-- Some Information, Image etc --></td>
        <td ng-click="showDetails(word)">{{word}}</td>
    </tr>
    <tr ng-show="currentDetail==word" ng-repeat-end>
        <td colspan="2">Details {{word}}</td>
    </tr>
</table>

JS:

angular.module('myApp', []).controller("TestCtrl", function($scope, $document, $compile){
    $scope.showDetails = function(word) {
        $scope.currentDetail = word;
    };
});

http://jsfiddle.net/HB7LU/20074/

answered Nov 19, 2015 at 13:43

Fissio

3,75818 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Thomas Sparber Over a year ago

Thank you very much for your answer. I know I can do that but I have one Problem with it... (That's why I wrote that I want to add iframes). When I do it like this I have thousends of iframes on my Website and it becomes unresponsive...

Fissio Over a year ago

If you're worried about performance, you should probably use ng-if instead of ng-show. With ng-if the associated elements don't exist in DOM until the expression evaluates to true, compared to ng-show where it just uses CSS show/hide. So only one iframe should exist at a time with ng-if. The code is pretty much the same as with the previous example. jsfiddle.net/HB7LU/20075

koox00 · Accepted Answer · 2015-11-19 13:36:13Z

1

$document.find in jqlite is limited to tag name only. You have to add jquery for anything more. See what is suported in the docs.

answered Nov 19, 2015 at 13:36

koox00

2,7212 gold badges20 silver badges28 bronze badges

5 Comments

Thomas Sparber Over a year ago

Thanks for your answer. I would like to accomplish it without jQuery. is there an angularjs way to do it?

Thomas Sparber Over a year ago

BTW: I also tried: target = angular.element(document.getElementById(...)) which also didn't work

koox00 Over a year ago

You could maybe use ngSanitize with ngBind or ngBindTemplate or ngBindHtml docs.angularjs.org/api/ng/directive/ngBindHtml

Thomas Sparber Over a year ago

That sounds pretty good! Can I use variables e.g. {{word}} inside that html?

koox00 Over a year ago

Yes. you can build the html as a sting so you can essentially do this $scope.htmltobind = "<div>"+word+"</div>"; in your controller

Tomer W · Accepted Answer · 2015-11-19 13:44:28Z

1

you have all you need built into angular already, you don't need the Javascript at all.

see this plunker example

  <table style="width:100%;">
    <thead style="background-color: lightgray;">
      <tr>
        <td style="width: 30px;"></td>
        <td>
          Name
        </td>
        <td>Gender</td>
      </tr>  
    </thead>
    <tbody>
      <tr ng-repeat-start="person in people">
        <td>
          <button ng-if="person.expanded" ng-click="person.expanded = false">-</button>
          <button ng-if="!person.expanded" ng-click="person.expanded = true">+</button>
        </td>
        <td>{{person.name}}</td>
        <td>{{person.gender}}</td>
      </tr>
      <tr ng-if="person.expanded" ng-repeat-end="">
        <td colspan="3">{{person.details}}</td>
      </tr>
    </tbody>
  </table>

answered Nov 19, 2015 at 13:44

Tomer W

3,4132 gold badges32 silver badges49 bronze badges

3 Comments

Thomas Sparber Over a year ago

Thanks for your answer! Sadly I have the same Problem as in @Fissio's answer: I want to add iframes and with thousands of iframes (at the end) the site becomes unresponsive...

Tomer W Over a year ago

this is the difference, i used ng-if and not ng-show, which prevents your content to show in the DOM at all... so you will only have an iframe if the item is expanded

Thomas Sparber Over a year ago

You're right, I didn't see that. Excellent answer then :-) Thanks

Collectives™ on Stack Overflow

Angularjs add element to DOM when clicking

3 Answers 3

2 Comments

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related