Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/363.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 滤镜在角度上重复_Javascript_Html_Css_Angularjs_Ng Repeat - Fatal编程技术网

Javascript 滤镜在角度上重复

Javascript 滤镜在角度上重复,javascript,html,css,angularjs,ng-repeat,Javascript,Html,Css,Angularjs,Ng Repeat,我在谷歌上搜索了很多,但没有找到任何关于我的问题的答案。我的问题是如何过滤菜单选项值?我已经把我的全部代码放在下面的位置 我有一个CSS菜单,它有href链接,但它位于不同的div。那么如何根据菜单选择过滤结果呢?请帮我做这个。 我的搜索框也隐藏在菜单下面。我试着给它z-index。但它不起作用。如何解决这个问题 我的菜单div如下: <div id="menu-button">Menu</div> <ul style="display:bloc

我在谷歌上搜索了很多,但没有找到任何关于我的问题的答案。我的问题是如何过滤菜单选项值?我已经把我的全部代码放在下面的位置

我有一个CSS菜单,它有
href
链接,但它位于不同的
div
。那么如何根据菜单选择过滤结果呢?请帮我做这个。 我的搜索框也隐藏在菜单下面。我试着给它
z-index
。但它不起作用。如何解决这个问题

我的菜单
div
如下:

 <div id="menu-button">Menu</div>
        <ul style="display:block;">
            <li><a href='#' ng-click="menuFilter={}">Home</a></li>
            <li id="deptMenu">
                <a href='#'>Department</a>
                <ul style="display: block;">
                    <li ng-repeat="dept in empDetails | unique:'department'">
                    <a href="" ng-click="menuFilter={department:'{{dept.department}}'}">{{dept.department}}</a>
                    </li>
                </ul>
           </li>
        </ul>
    </div>
菜单
但集装箱位于不同的位置,如下所示:

 <div class="container">
    <div id="userlist" class="row">
        <p data-ng-show="(empDetails | filter:searchTxt).length==0"><font color="red">There are no results for this search</font></p>
        <div id="userDiv{{$index}}" class="shadow col-sm-1" ng-repeat="info in empDetails | filter:menuFilter | orderBy:'Name' | filter:searchTxt" tweenmax-animating-directive ng-click="openDetail()">
            <div class="employeeDetail">
                <div style="line-height:25px">
                    <b>{{info.Name}}</b><br/>
                    <b>number  :</b>{{info.number}}<br/>
                    <b>Post :</b>{{info.post}}<br/>
                </div>
            </div>
        </div>
    </div>
</div>

此搜索没有结果

{{info.Name}}
编号:{{info.number}}
帖子:{{info.Post}}

我放置了“menuFilter”,但它不起作用。

只需保存所选部门的值并在过滤器中使用即可。因此,您的链接将更改为:

<a href="" ng-click="selectDepartment(dept.department)">{{dept.department}}</a>
并且
ng repeat
将更改为:

ng-repeat="info in empDetails | filter: departmentFilter | orderBy:'Name' | filter:searchTxt"

此处有一个工作版本:。

您也可以签出此版本: 在您的菜单中:

<a href="" ng-click="setDept(dept)">{{dept.department}}</a>
在主容器中:

    <div class="container">
    <div id="userlist" class="row">
        <p data-ng-show="(empDetails | filter:searchTxt).length==0"><font color="red">There are no results for this search</font></p>
        <div id="userDiv{{$index}}" ng-show="showDept" class="shadow col-sm-1" tweenmax-animating-directive ng-click="openDetail()">
            <div class="employeeDetail">
                <div style="line-height:25px">
                    <b>{{dept.Name}}</b><br/>
                    <b>number  :</b>{{dept.number}}<br/>
                    <b>Post :</b>{{dept.post}}<br/>
                </div>
            </div>
        </div>
    </div>
</div>

此搜索没有结果

{{dept.Name}}
编号:{{dept.number}}
职位:{{dept.Post}}

请在每篇文章中只问一个问题。隐藏的搜索框/
z-index
问题应进入新问题。请改进问题以获得答案。请改进您的问题。确实不清楚期望值是什么。请正确解释在单击菜单或同时询问多个问题时过滤应做什么。
 $scope.showDept = false;
 $scope.dept = {};
 $scope.setDept = function(d) {
   $scope.dept = d;
   $scope.showDept = true;
 };
    <div class="container">
    <div id="userlist" class="row">
        <p data-ng-show="(empDetails | filter:searchTxt).length==0"><font color="red">There are no results for this search</font></p>
        <div id="userDiv{{$index}}" ng-show="showDept" class="shadow col-sm-1" tweenmax-animating-directive ng-click="openDetail()">
            <div class="employeeDetail">
                <div style="line-height:25px">
                    <b>{{dept.Name}}</b><br/>
                    <b>number  :</b>{{dept.number}}<br/>
                    <b>Post :</b>{{dept.post}}<br/>
                </div>
            </div>
        </div>
    </div>
</div>