Javascript 在使用ng repeat之后使用Angular添加其他表行

刚接触angular，仍然在解决我遇到的许多问题。我有一个问题要向大家提出

我目前有一个表正在加载时填充ng repeat。数据本身就是一堆钱。一个特别的条目是这些金额的集合。单击时，我有一个ng onclick来运行函数getLadders（）。我希望它基本上在图表中该元素所在的位置向下平移，并在该特定元素中创建新的数据行

一个迷你们画的数据吧，因为我不能粘贴精确的数据

ID        Name         Total

1         Single        $20
2         Single        $35
3         Combination   $60***
4         Single        $10

这就是当前图表，其中的组合是包含许多细分的数据。单击该行，我希望它执行类似的操作

ID        Name         Total

1         Single        $20
2         Single        $35
3         Combination   $60***
3.1       Single        $20
3.2       Single        $20
3.3       Single        $20
4         Single        $10

基本上，把所有的东西都放在这一块里。我使用提取的数据编写了函数，现在，我使用普通的jQuery来选择该行，并在其后附加一个tablerow，但它最终将其附加到整个表的末尾，而不是该行

有什么帮助吗

另外，为了增加好处，我在那一行上也有一个图标，我也希望修改它。这是一个加号，当数据被显示时，我希望是一个减号，然后再回到加号

    <tbody ng-controller="myCDsController">
    <tr ng-repeat="holding in holdings" ng-if="holding.type !== 'Ladder'" data-type="{{holding.typeClass}}" data-id="{{holding.id}}">
        <td>{{holding.type}}</td>
        <td contenteditable="true">{{holding.name}}</td>
        <td>{{holding.maturityDate}}</td>
        <td>{{holding.amount | currency:"$"}}</td>
        <td>{{holding.rate | percentage:2}}</td>
    </tr>
    <tr ng-repeat="holding in holdings" ng-if="holding.type == 'Ladder'" ng-controller="openLaddersController"  data-type="{{holding.typeClass}}" data-id="{{holding.id}}">
        <td><i ng-class="{'icon-dislike': !icon,  'icon-plus':icon}" ng-click="openLadders(holding.id)" >dfgh</i> {{holding.type}}</td>
        <td contenteditable="true">{{holding.name}}</td>
        <td>{{holding.maturityDate}}</td>
        <td>{{holding.amount | currency:"$"}}</td>
        <td>{{holding.rate | percentage:2}}</td>
    </tr>
</tbody>

{{holding.type}
{{holding.name}
{{持有.到期日}
{{holding.amount}货币：“$”}
{{持有率|百分比：2}
dfgh{{holding.type}
{{holding.name}
{{持有.到期日}
{{holding.amount}货币：“$”}
{{持有率|百分比：2}

以下是基于上述内容的一些指导。您可能应该将表结构简化为以下内容：

<tbody ng-controller="myCDsController">
    <tr ng-repeat="holding in holdings" data-type="{{holding.typeClass}}" data-id="{{holding.id}}">
        <td><i ng-if="holding.type === 'Ladder'" ng-class="{'icon-dislike': !icon,  'icon-plus':icon}" ng-click="openLadders(holding)" >dfgh</i>{{holding.type}}</td>
        <td contenteditable="true">{{holding.name}}</td>
        <td>{{holding.maturityDate}}</td>
        <td>{{holding.amount | currency:"$"}}</td>
        <td>{{holding.rate | percentage:2}}</td>
    </tr>
    <tr ng-show="!icon" ng-if="holding.type === 'Ladder'>
        <td colspan="5">
            <table>
               <tbody>
                   <tr ng-repeat="child in holding.children">
                       <td><!-- insert child content here --></td>
                   </tr>
               </tbody>
            </table>
        </td>
    </tr>
</tbody>

---

你能提供一些桌子的代码吗？对于图标，您可以这样做：Hi@Daniel刚刚添加了表格。我有一个问题，我有一个ng点击开始一个函数，我仍然可以这样做吗？当然，你可以添加一个分号，然后把我的代码放在后面，但是最好在函数调用中包含我的行，但是它应该是$scope.collapsed=$范围。崩溃。您是否能够提供一个带有示例的JSFIDLE？在一个有角度的世界中，使用jquery进行子更新可能是错误的决定。不幸的是，我不能。调用太多函数来生成数据。我想我能理解这些概念。我将尝试用随机数据制作一个。@Daniel图标效果很好，所以这是一个例外。

app.controller('myCDsController', function(holding) {
   $scope.openLadders = function() {
       holding.children = getChildRows(holding)   
   }
})