[angularjs]将 jquery 函数添加到角ng-repeat

发布时间: 2017/4/16 3:15:03
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我有这个小提琴在它我有表,可单击的行,展开并显示与该记录相关的信息,在这种情况下父行一个类别,是子元素显示与子类别相关的信息。我的问题是,如果我添加的最后一行是一个用于展开第二个类别行,我需要的是任何父行扩展因为每个父行子类别记录数目可能带来不同数量的子类别。

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

解决方法 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>

这会工作,但我劝你还是用角的函数 (东西喜欢ngAnimate,或只是显示和隐藏与 ngShow) 替换该 jQuery 函数

请找一个工作示例在这里

官方微信
官方QQ群
31647020