javascript - 将 jquery 函数添加到 Angular ng-repeat

Question

我有这个Fiddle ，其中我有一个表，其中有一个可单击行，该行可展开并显示与该记录相关的信息，在本例中，父行是一个类别，子行显示与子类别相关的信息。我的问题是，如果我添加第二个类别行，最后一行是展开的行，我需要的是任何父行都展开，因为每个父行的子类别记录数量可能会带来不同数量的子类别。

$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