将jquery函数添加到Angular ng repeat中

Add jquery function to an Angular ng-repeat

本文关键字：ng repeat Angular jquery 函数 添加      更新时间：2024-04-25

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

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

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

$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，重复如下内容：

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

这是可行的，但我建议您将jQuery函数替换为Angular函数（类似于ngAnimate，或者只是用ngShow显示和隐藏）

请在此处找到一个工作示例

相关文章：