MetisMenu AngularJs Filter

[yasir-odinesolutions]

I am using MetisMenu with my angularJs application. I want to add searching option in metismenu. I have added text bob on top of menu for this purpose. Application is filtering menu when I type any text in input field. Similarly it shows complete list when I removed text from search box. But when I remove the filter text then menu is not navigable anymore. Please check blow screenshots + code.

It seems that filter renders new menu list but metisMenu don’t know about those new or removed items. How can i update MetisMenu every time I update the list - or MetisMenu should listen for some events

<nav class="navbar-default navbar-static-side" role="navigation" ng-controller="NavigationController as menu">
    <div class="sidebar-collapse">
        <ul  class="nav metismenu" id="side-menu">
            <li class="nav-header">
                <div class="dropdown profile-element" dropdown>
                    <span>
                        <img src="img/odine-logo-s.png" alt="image" width="178" height="79">
                    </span>
                </div>
                <div class="logo-element">
                    ODINE
                </div>
                <input type="text" placeholder="Search in menu" name="search" class="form-control input-s-lg" ng-model ="searchText" />
            </li>
            <li >
                <a href=""><i class="fa fa-bar-chart-o"></i> <span class="nav-label">Reports</span><span class="fa arrow"></span> </a>
                <ul class="nav nav-second-level collapse">
                    <li ng-repeat="uiReportGroup in ReportList|filter:searchFilter" side-navigation>
                        <a href="">{{uiReportGroup.label}}<span class="fa arrow"></span> </a>
                        <ul class="nav nav-third-level collapse">
                            <li ng-repeat="uiReport in uiReportGroup.items">
                                <a href="#/reports.report/{{uiReport.SrId}}" ng-click="hideNave()">{{uiReport.SrName}}</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>

    </div>
</nav>

Here is the controller code:

$scope.searchText;
        $scope.searchFilter = function (uiReportGroup) {
            if (!$scope.searchText) {
                return true;
            }
            var keyword = new RegExp($scope.searchText, 'i');
            if (keyword.test(uiReportGroup.label)) {
                return true;
            }
            for (var i = 0; i < uiReportGroup.items.length; ++i) {
                if (keyword.test(uiReportGroup.items[i].SrName)) {
                    return true;
                }
            }
            return false;
        };

Bellow screenshot is showing filter list in Menu when i type in search box.

I get bellow screen after removing text from search box. Now I cannot go to third level of any menu item. Like clicking ‘Business Reports’, ‘System Reports’ menu group will not open third level menu items.

Kindly help me in resolving this issue regards, Yasir

[shosh100]

Do you have a solution?

[profection]

you can write a special directive to solve this problem. in the directive use element.metisMenu() to re-register the event.then use this directive to the html ng-repeat line,so whenever the repeat end it will call this function again.

[mastersamm-db]

.directive('ng-metis', function ($timeout) { var directive = { restrict: 'A', link: function(scope, el, atts) { $timeout(function () { angular.element(el).metisMenu(); //angular.element("#menu").metisMenu(); }, 0); } };