Question

我使用以下链接过滤我的菜单列表： - https://www.w3schools.com/howto/howto_js_filter_lists.asp

我的HTML菜单列表是： -

<div class="nav-side-menu" id="menu-list">
    <div class="menu-list">
        <input type="text" name="" id="searchMenu" placeholder="SEARCH MENU" class="form-control" style="width:319px;height:30px;border-width:0px;border-radius:0px;font-weight:100;background-color: #454C50;color: #FFF;" ng-click="searchMenuList()" />
        <ul id="menu-content" class="menu-content collapse out">

            <li data-toggle="collapse" data-target="#markets" class="collapsed">
                <a href="#"><i class="fa fa-book fa-lg"></i> MARKETS <span class="arrow"></span></a>
            </li>

            <ul class="sub-menu collapse" id="markets">

                <li data-toggle="collapse" data-target="#abc" class="collapsed">
                    <a href="#"><i class="fa fa-book fa-lg"></i> MARKET LIST <span class="arrow"></span></a>
                </li>

                <ul class="sub-menu collapse" id="abc">
                    <li data-toggle="modal" data-target="#listA">
                        <a>List-A</a>
                    </li>

                    <li data-toggle="modal" data-target="#listB">
                        <a>List-B</a>
                    </li>
                </ul>

            </ul>

            <!--   and many more li elements -->

            <li data-toggle="collapse" data-target="#Products" class="collapsed">
                <a href="#"><i class="fa fa-book fa-lg"></i> Products <span class="arrow"></span></a>
            </li>

            <ul class="sub-menu collapse" id="Products">

                <li data-toggle="collapse" data-target="#xyz" class="collapsed">
                    <a href="#"><i class="fa fa-book fa-lg"></i> PRODUCTS LIST <span class="arrow"></span></a>
                </li>

                <ul class="sub-menu collapse" id="xyz">
                    <li data-toggle="modal" data-target="#listX">
                        <a>List-X</a>
                    </li>

                    <li data-toggle="modal" data-target="#listY">
                        <a>List-Y</a>
                    </li>
                </ul>

            </ul>

        </ul>
    </div>
</div>

我的控制器代码是： -

    $scope.searchMenuList = function() {
      var input, filter, ul, li, a, i;
      input = document.getElementById('searchMenu');
      filter = input.value.toUpperCase();
      ul = document.getElementById("menu-content");
      li = ul.getElementsByTagName('li');
      for (i = 0; i < li.length; i++) {
          a = li[i].getElementsByTagName("a")[0];
          if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
              li[i].style.display = "";
          } else {
              li[i].style.display = "none";
          }
      }
  };

我在这里遇到两个问题： - 1.仅对第一个li元素进行过滤。意味着它没有过滤PRODUCTS LIST。 2.它只用于ng-click而不是ng-change。当我将其更改为ng-change时，我的整个应用程序UI会受到干扰。

我无法理解它适用于ng-click而不是ng-change的原因。任何人都可以告诉我这里的问题吗？

ng-change扰乱了chrome中的完整UI

0 个答案: