Question

我有这个Fiddle，其中有一个表格，其中有一个可点击的行，可以展开并显示与该记录相关的信息，在这种情况下，父行是一个类别，子项显示与a相关的信息子类别。我的问题是，如果我添加第二个类别行，最后一行是扩展的那一行，我需要的是任何父行都会扩展，因为每个父行的子类别记录数可以带来不同数量的子类别。

$scope.category = [
   {
     "desc": "CATEGORY 1",
     "LW$": "45",
     "LW": "-4%",
     "L4W": "-15.7%",
     "L13W": "24%",
     "L52W": "-6%"
   }
]

Answer 1

嵌套数据是可能的（也是合乎逻辑的）：

$scope.category = [
    {
        desc: "CATEGORY 1",
        "LW$": "45",
        "LW": "-4%",
        "L4W": "-15.7%",
        "L13W": "24%",
        "L52W": "-6%",
        subcat: [
            {
                "desc": "SUB CATEGORY 1",
                "LW$": "45",
                "LW": "-4%",
                "L4W": "-15.7%",
                "L13W": "24%",
                "L52W": "-9%"
            },
            {
                "desc": "SUB CATEGORY 2",
                "LW$": "15",
                "LW": "4.2%",
                "L4W": "1.7%",
                "L13W": "-2.4%",
                "L52W": "-65%"
            }
        ]
    }
];

然后，将两个ng-repeat嵌套在这样的东西：

<tbody ng-repeat="d in category">
    <tr class="parent">
        <td ng-class="expand" drill-down>+</td>
        <td>{{d.desc}}</td>
        <td>{{d.LW$}}</td>
        <td>{{d.LW}}</td>
        <td>{{d.L4W}}</td>
        <td>{{d.L13W}}</td>
        <td>{{d.L52W}}</td>
    </tr>

    <tr ng-repeat="s in d.subcat" class="child">
        <td ng-class="expand" drill-down>+</td>
        <td>{{s.desc}}</td>
        <td>{{s.LW$}}</td>
        <td>{{s.LW}}</td>
        <td>{{s.L4W}}</td>
        <td>{{s.L13W}}</td>
        <td>{{s.L52W}}</td>
    </tr>
</tbody>

这会有效，但我建议你用Angular函数替换jQuery函数（比如ngAnimate，或者用ngShow显示和隐藏）

请找一个有效的例子here

将jquery函数添加到Angular ng-repeat

1 个答案: