单击时Angularjs将元素添加到DOM

Question

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

<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

你已经把所有你需要的东西都内置到了 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>

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

jqlite 中的

$document.find 仅限于标签名称。您必须添加 jquery 才能获得更多信息。 查看docs 中支持的内容。