Angularjs在单击时向DOM添加元素

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?

Answer 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 .

Answer 2

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/

Answer 3

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>