Angularjs 单击时将元素添加到 DOM

Question

我想创建一个包含动态内容的 table。单击元素时，详细信息应显示在下一行中。所以我创建了以下内容：

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

我有以下js代码：

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

我也尝试了上面的评论解决方案，但没有任何效果（但是 tr 出现了）。我想 $document.find("Details" + word) 有问题，但我不知道是什么。

最终我想添加一个 <iframe> 并且源将包含 word.

有人看到我做错了什么了吗？

Answer 1

jqlite 中的

$document.find 仅限于标记名称。您必须添加 jquery 以获得更多信息。查看 docs.

支持的内容

Answer 2

无需奇怪的非角度 DOM 操作：您只需要这个。

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

您已经在 angular 中内置了您需要的一切，您根本不需要 Javascript。

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

Angularjs 单击时将元素添加到 DOM

Angularjs add element to DOM when clicking

html

javascript

dom

add

angularjs