javascript - 无法使用 Angular ng-repeat 和 jquery 在 HTML 表中显示行

Question

我有一个 HTML 表格，根据用户是否单击一行来展开或折叠，主记录是“父”行，如果单击它，您将看到一个显示一些记录的子行，我的问题是我添加了默认情况下应显示的第三行，因为子级是隐藏的，直到您单击父级，但第三行不会出现，我无法弄清楚问题=(

这是我的 example在 fiddle 中，您会在下面看到我的指令。

angular
.module('app',[])
.controller('DataCtrl',DataCtrl)
.directive('drillDown',drillDown);

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

        $scope.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%"
            },
            {
                "desc": "SUB CATEGORY 3",
                "LW$": "767",
                "LW": "4.2%",
                "L4W": "9.7%",
                "L13W": "-2.4%",
                "L52W": "-21%"
            },
            {
                "desc": "SUB CATEGORY 4",
                "LW$": "21",
                "LW": "14.2%",
                "L4W": "1.7%",
                "L13W": "-42.4%",
                "L52W": "-34%"
            }
        ];
    }

    function drillDown() {

     var directive = {
     restrict: 'A',
    link: link
    };

    return directive;

    function link(scope,element) {

     var table = $('.categories-table');

     table.each(function() {
        var $table = $(this);
        $table.find('.parent').each(function(){
            if($(this).nextUntil('.parent', ".child").length > 0){
                $(this).children('td:first').html('+');
            }
        });
        $table.find('.child').each(function(){
            if($(this).nextUntil('.child', ".grandson").length > 0){
                $(this).children('td:first').html('+');
            }
        });

        var $childRows = $table.find('tbody tr').not('.parent').hide();
        $table.find('button.hide').click(function() {
            $childRows.hide();

        });
    });
    element.on('click',function(){
        if($(this).parent().hasClass('parent') == true)
        {
            console.log("----Parent");
            if ($(this).text() == "+")
                $(this).text("-")
            else
                $(this).text("+");

            $(this).parent().nextUntil('.parent', ".child").fadeToggle("slow", "linear");
            $(this).parent().nextUntil('.parent', ".grandson").hide("fast");
            $(this).parent().nextUntil('.parent', ".child").each(function(){

                if($(this).children('td:first').text() == '-')
                    $(this).children('td:first').text('+');
            });
        }
        else if($(this).parent().hasClass('child') == true)
        {
            console.log("----Child");
            if ($(this).text() == "+")
                $(this).text("-")
            else
                $(this).text("+");
            $(this).parent().nextUntil('.child',    ".grandson").fadeToggle("slow", "linear");
        }
    });
 }
}

Answer 1

首先我建议您阅读此主题:"Thinking in AngularJS" if I have a jQuery background?

显然你使用jquery+Angular的方式是错误的。您的 jQuery 代码中存在逻辑错误。

如果你想以 Angular 方式解决问题:

一种可能的解决方案是使用范围变量或对象变量和 ng-show 指令。

类似这样的:https://jsfiddle.net/p7ew017u/4/

<td ng-class="expand" ng-click="d.expanded = !d.expanded">+</td>

还有一件事:表格不太适合显示树结构(如类别、子类别、子子类别等)。最好使用列表(ul,ol)