javascript - appending content in angular.js

Question

I have a table which I populate with data and I want to insert other rows to that table, under the element that was clicked dynamically. I have an array of json objects called rows and when I click on a row it should fetch an array of json objects called campaigns.

This is my html:

<tbody>
    <tr ng-repeat="row in rows">
    <td>
        <a href="javascript:;" ng-click="toggleCollapse(row.id)">{{ row.name }}</a>
    </td>
    <td>{{ row.clicks }}</td>
    </tr>

    <script type="text/ng-template" id="clicked">
    <tr ng-repeat="campaign in campaigns">
        <td>
            <a href="javascript:;">{{ campaign.name}}</a> 
        </td>
        <td>{{ campaign.clicks }}</td>
    </tr>
    </script>
</tbody>

This is my function:

$scope.toggleCollapse = function(id) {
    var campaignId = id;
    if (campaignId === $scope.selectedRow) {
        $scope.selectedRow = null;
    } else {
        $scope.selectedRow = campaignId;
        $scope.ads.push({
            "id" : 1,
            "name" : "TestName",
            "clicks" : 400
        })
        // append template here 
    }

};

Answer 1

您不需要单独的模板，只需直接输入即可。如果campaigns 数组中没有任何内容，则将有0 个campaigns。