Question

有一个多级java脚本对象。然后我使用ng-repeat递归打印这些对象。现在我过滤节点。当我给出搜索字符串时，它只显示匹配的字符串。但我要找的是它应该与其父树一起过滤。例如，如果我搜索关键字“self”，那么有两个节点具有“Self”关键字。它们是

Pateint：Self
D或DA：自我/护理团队

他们的父母是

第1步：允许访问的用户类型

它的父母是

访问详情

它的父母是

主

。像这个层次结构一样，它应该过滤。但它只过滤

Pateint：Self
D或DA：自我/护理团队

假设在搜索框中我给出了关键字“Self”。它应该返回

大师
- 访问详情
  - 第1步：允许访问的用户类型
    - Pateint：Self
    - D或DA：自我/护理团队

但它返回

Pateint：Self
D或DA：自我/护理团队

我正在寻找的是如果搜索一个字符串，它应该与其父节点一起显示。怎么解决？请帮帮忙。

var app = angular.module('app', []);

app.controller('AppCtrl', function ($scope) {

console.log(22);

$scope.categories = [
    {"id":"1","linkStatus":"no","title":"Master","tag":["head"],"categories":[{"id":"1.1","linkStatus":"yes","link":"masterDb.sectionPage({sectionName: 'userRole'})","title":"User roles","tag":["ur","ru"]},{"id":"1.2","linkStatus":"yes","link":"masterDb.sectionPage({sectionName: 'assets'})","title":"Assets","tag":["as","st"]},{"id":"1.3","linkStatus":"no","title":"Access details","tag":["ad","da"],
        "categories":[{"id":"1.3.1","linkStatus":"no","title":"Step 1: User types allowed to access","tag":["tf","ft"],"categories":[{"id":"1.3.1.1","linkStatus":"no","title":"Pateint: Self","tag":["ps","sp"]},{"id":"1.3.1.2","linkStatus":"no","title":"D or DA: Self / Care team","tag":["ct","tc"]},{"id":"1.3.1.3","linkStatus":"no","title":"Admin: Everyone","tag":["av","va"]}]},{"id":"1.3.2","linkStatus":"no","title":"Step 2: Plugin relevance for different roles or types","tag":["po","op"],"categories":[{"id":"1.3.2.1","linkStatus":"yes","link":"masterDb.sectionPage({sectionName: 'plugins'})","title":"Step 2a: User plugins","tag":["sd","ds"]},{"id":"1.3.2.2","linkStatus":"yes","link":"masterDb.sectionPage({sectionName: 'eventPlugins'})","title":"Step 2b: Event plugins","tag":["aw","wa"]}]}]

    },{"id":"1.4","linkStatus":"yes","link":"masterDb.sectionPage({sectionName: 'appPermission'})","title":"App access details","tag":["wa","aw"]},{"id":"1.5","linkStatus":"yes","link":"masterDb.sectionPage({sectionName: 'careTeam'})","title":"Care Team","tag":["df","fd"]},{"id":"1.6","linkStatus":"yes","link":"masterDb.sectionPage({sectionName: 'apptNoteConfig'})","title":"Appointment Note Configuration","tag":["dj","jd"]},{"id":"1.7","linkStatus":"yes","link":"masterDb.sectionPage({sectionName: 'noteLockPermission'})","title":"Note lock permission settings","tag":["rr","yy"]},{"id":"1.8","linkStatus":"yes","link":"masterDb.sectionPage({sectionName: 'locations'})","title":"Savant Care office locations","tag":["rr","yy"]}]


    },
    {
        "id":"2",
        "linkStatus":"no",
        "title":"Billing",
        "tag":["t","jt"],
        "categories":[
            {
                "id":"2.1",
                "linkStatus":"yes",
                "link":"masterDb.sectionPage({sectionName: 'eligibleDetail'})",
                "title":"Eligible Details",
                "tag":["we","ew"]
            },{
                "id":"2.2",
                "linkStatus":"yes",
                "link":"masterDb.sectionPage({sectionName: 'cptCodes'})",
                "title":"CPT",
                "tag":["dd","ss"],
                "categories":[
                    {
                        "id":"2.2.1",
                        "linkStatus":"yes",
                        "link":"masterDb.sectionPage({sectionName: 'cptCodesRates'})",
                        "title":"CPT code ratesz",
                        "tag":["ss","ww"]
                    }
                ]
            }
        ]
    },


];

});

app.filter('myFilter', function () {
    return function(items, searchString) {

        var arr=[];
        if (!searchString) {
            return items;
        }
        else
        {
            var countdown = function(items)
            {

                angular.forEach(items, function (value, key) {
                    var title=value.title.toLowerCase();

                    if(title.indexOf(searchString.toLowerCase()) !== -1)
                    {
                        arr.push(value);
                    }
					 if('categories' in value)
                     {
                            return countdown(value.categories);
                     }

                })


            }
            countdown(items);
            return arr;



        }

    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller='AppCtrl'>
<input type="text" ng-model="test">
<script type="text/ng-template" id="categoryTree">

    <span ng-if="category.linkStatus=='yes'">
        <a ui-sref="{{category.link}}" ui-sref-active="activeState"> {{ category.title }}</a>
    </span>
    <span ng-if="category.linkStatus=='no'">
         {{ category.title }}
    </span>
    <ul ng-if="category.categories">
        <li ng-repeat="category in category.categories | myFilter:test" ng-include="'categoryTree'">
        </li>
    </ul>
</script>
<ul>
    <li ng-repeat="category in categories | myFilter:test " ng-include="'categoryTree'"></li> 
</ul>
</div>

如何在agngulrjs中实现递归搜索过滤器？

0 个答案: