Question

角色的新手，仍在解决我遇到的许多问题。我有一个问题要向大家提出。

我目前有一个正在使用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>

Answer 1

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

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

可能有更好的方法来处理上面的data-id / data-type属性，但我需要更多的上下文。

另外，请注意我删除了一个控制器;我怀疑你需要两个控制器用于这个用例。您的控制器看起来应该是这样的，可能是：

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

使用ng-repeat后使用Angular添加其他表行

1 个答案: