Angularjs добавляет элемент в DOM при нажатии

Question

Я хочу создать таблицу, содержащую динамический контент. При нажатии на элемент информация должна отображаться в следующей строке. Так я creatied следующее:

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

Я также попытался закомментированные решения выше, но ничего из этого не работает (ВУ показывает вверх, однако). Я думаю, что что-то не так с $document.find("Details" + word), но я не знаю что.

В конечном счете, я хочу добавить , а источник будет содержать word.

Кто-нибудь видит, что я делаю неправильно здесь?

Answer 1

Нет необходимости в необычных неангулярных манипуляциях с 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 2

$ document.find в jqlite ограничивается только именем тега. Вы должны добавить jquery для чего-то большего. Посмотрите, что такое docs.

Answer 3

вы все, что вам нужно встроенный в угловой уже не нужен 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>