Question

我使用angular js在ng-repeat创建了一个树状视图。我还添加了一个过滤器来过滤我的数据源。我能够按照我的预期过滤父节点和资源节点，但我的问题是我无法按照预期实现子节点过滤。这是我目前发展状况的图片。

图4显示过滤我的子节点的当前ststus，但我的确切要求与Img 5中的相同。即，如果存在子节点，则过滤节点时，只有该子节点及其父节点应该是上传的，必须隐藏所有剩余的子节点。我该怎么办呢。这是我的代码段。

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script>
        angular.module("app", [])
            .controller('MainController', function ($scope) {
                $scope.ObjectData = { "name": "Main Object 1",
                                      "ParentObject": [
                                        {
                                          "name": "Parent Object 1",
                                          "ChildObject": [
                                            {"name": "Child Object 11"},
                                            {"name": "Child Object 12"}
                                          ]
                                        },
                                        {
                                          "name": "Parent Object 2",
                                          "ChildObject": [
                                            {"name": "Child Object 21"},
                                            {"name": "Child Object 22"}
                                          ]
                                        }
                                      ],
                                      "resources": [
                                        "Resource 1", "Resource 2"
                                      ]
                                    }
            });
    </script>
</head>

<body>

    <div ng-app="app" ng-controller="MainController">
        <input type="text" placeholder="search" ng-model="search">
        <ul>
            <li>
                <a>
                    <span>{{ ObjectData.name }}</span>
                </a>
                <ul>
                    <li ng-repeat="subItem in ObjectData.ParentObject | filter:search">
                        <a>
                            <span>{{ subItem.name }}</span>
                        </a>

                        <ul>
                            <li ng-repeat="childItem in subItem.ChildObject">
                                <a>
                                    <span>{{ childItem.name }}</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>

                <ul>
                    <li ng-repeat="resources in ObjectData.resources | filter:search">
                        <a>
                            <span>{{ resources }}</span>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

</body>

</html>

Answer 1

在付出更多努力之后，我只是创建了一个简单的逻辑来实现我的要求。我正在发布解决方案，因为这可能对某人有帮助。

我刚在我的子项目div中添加了ng-if。它根据两个条件显示div内容。

如果搜索键包含div中的字符，则应该可以看到单个子对象。

如果搜索关键字由父节点中的字符组成，则所有子元素必须可见。

这是我的最终代码。

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script>
        angular.module("app", [])
            .controller('MainController', function ($scope) {
                $scope.ObjectData = { "name": "Main Object 1",
                                      "ParentObject": [
                                        {
                                          "name": "Parent Object 1",
                                          "ChildObject": [
                                            {"name": "Child Object 11"},
                                            {"name": "Child Object 12"}
                                          ]
                                        },
                                        {
                                          "name": "Parent Object 2",
                                          "ChildObject": [
                                            {"name": "Child Object 21"},
                                            {"name": "Child Object 22"}
                                          ]
                                        }
                                      ],
                                      "resources": [
                                        "Resource 1", "Resource 2"
                                      ]
                                    };
                $scope.IsChildObjectVisible = function(parent, child){
                    var searchKey = $scope.search;
                    var returnVal = true;
                    if(undefined != searchKey && null != searchKey && searchKey.length > 0){                        
                        returnVal = ((child.name.toLowerCase().indexOf(searchKey.toLowerCase()) > -1) || //Search key is present in a child node then that node is visible
                                     (parent.name.toLowerCase().indexOf(searchKey.toLowerCase()) > -1)); //Search key is present in the parent node so all the child nodes inside that are visible
                    }
                    return returnVal;
                }
            });
    </script>
</head>

<body>

    <div ng-app="app" ng-controller="MainController">
        <input type="text" placeholder="search" ng-model="search">
        <ul>
            <li>
                <a><span>{{ ObjectData.name }}</span></a>
                <ul>
                    <li ng-repeat="subItem in ObjectData.ParentObject | filter:search">
                        <a><span>{{ subItem.name }}</span></a>
                        <ul>
                            <li ng-repeat="childItem in subItem.ChildObject" ng-if="IsChildObjectVisible(subItem, childItem)">
                                <a><span>{{ childItem.name }}</span></a>
                            </li>
                        </ul>
                    </li>
                </ul>

                <ul>
                    <li ng-repeat="resources in ObjectData.resources | filter:search">
                        <a><span>{{ resources }}</span></a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

</body>

</html>

Answer 2

<强> HTML：

<li ng-repeat="childItem in subItem.ChildObject" ng-if='$filter(subItem.ChildObject, search).length == 0 || childItem.name == search'>
    <a>
        <span>{{ childItem.name }}</span>
    </a>
</li>

<强>使用Javascript：

.controller('MainController', function ($scope, $filter) {
    $scope.$filter = $filter('filter');
    //other stuff...
});

在父节点和子节点内过滤角度js数据源

2 个答案: