javascript - jQuery 不能与 select 标签和 ngSwitch 一起使用，为什么？

Question

我正在使用 AngularJS 和一些 jQuery 构建一个带有 svgs 的交互式平面图目录。这个想法是，当您单击名称和/或部门时，滑块将使用 href 响应滚动到其所在的楼层和所在的房间。一旦找到房间，就会在该房间上发生闪烁动画。

这是编写代码的原始方式，并且运行良好。

<h2 class="show"  id="roomsHeading">Rooms</h2>
<ul class="rooms">
   <li class="show" ng-repeat="x in pan.people"><a href="{{x.room}}">{{x.department}}</a></li>
</ul>

但我想用选择和选项标签替换标题来组织目录。你可以在下面看到。

<select id="roomsHeading" class="custom-select show" ng-model="change">
   <option value="Default">All</option>
   <option class="options show" value="Departments">Departments</option>
   <option class="options show" value="Faculty">Faculty</option>
</select>
<ul class="rooms" ng-switch="change" >
   <li class="show" ng-switch-when="Default" ng-repeat="x in pan.people"><a href="{{x.room}}">{{x.department}}</a><a href="{{x.room}}">{{x.name}}</a></li>
   <li class="show" ng-switch-when="Departments" ng-repeat="x in pan.people">
      <a href="{{x.room}}">{{x.department}}</a>
   </li>
   <li class="show" ng-switch-when="Faculty" ng-repeat="x in pan.people">
      <a href="{{x.room}}">{{x.name}}</a>
   </li>
</ul>

一旦我将标题更改为选择/选项标签，jQuery 就会停止工作。这是演示的链接。 演示

下面的jQuery：

$(function() {

    //overwrite jquery to match any case (by making uppercase)
    jQuery.expr[':'].contains = function(a, i, m) {
        return jQuery(a).text().toUpperCase()
            .indexOf(m[3].toUpperCase()) >= 0;
    };

    var deactivateAll=function() {
        $('.roomHighlight').removeClass('active');
        $('.directory a').removeClass('active');
        $('g').removeClass('hasActiveCircle');
    }    

    var hideShowHeadings=function() {
        if($('.rooms .show').length >0) {
            $('#roomsHeading').addClass('show');
        }
        else {
            $('#roomsHeading').removeClass('show');
        }
        if($('.people .show').length >0) {
            $('#peopleHeading').addClass('show');
        }
        else {
            $('#peopleHeading').removeClass('show');
        }
    }

    $('.directory .rooms a').on( "click", function(e) {
        e.preventDefault();
        var target = $(this).attr('href');
        deactivateAll();

        $('#'+target).addClass('active')
        $(this).addClass('active')
        $('.slider').animate({scrollTop: $("#"+target).offset().top});
    });

    $('.directory .people a').on( "click", function(e) {
        e.preventDefault();
        var target = $(this).attr('href');
        deactivateAll();

        $(this).addClass('active')
        $('.slider').animate({
            scrollTop: $("#"+target).offset().top}, 200);
        $("#"+target).addClass('hasActiveCircle')
    });

    $('#searchBox').on( "input", function(e) {
        var searchMatch = $(this).val();
        console.log( searchMatch);

        if(searchMatch =="") {
            $("li").addClass("show");
        }
        else {
            $("li").removeClass("show");
            $("li:contains("+searchMatch+")").addClass("show");
            hideShowHeadings();
        }

    });
});

标签： javascripthtmljqueryangularjsng-switch