在 Angular 中过滤 ng-repeat答案

【问题标题】：Filter ng-repeat in Angular在 Angular 中过滤 ng-repeat
【发布时间】：2015-09-19 01:58:35
【问题描述】：

我在 google 上搜索了很多，但没有找到我的问题。我的问题是如何过滤我的菜单选项值？我已将我的整个代码放在下面的位置。

http://plnkr.co/edit/q5WLaIvTN434o4nZNBdR

我有一个 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>

我放置了“menuFilter”，但这不起作用。

【问题讨论】：

每个帖子只问一个问题。隐藏的搜索框/z-index问题应该进入一个新问题。
请改进问题以获得答案
改进你的问题。
真的不清楚期望是什么。请正确解释点击菜单时应该做什么过滤
很抱歉一次有多个问题。

标签： javascript html css angularjs ng-repeat

【解决方案1】：

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

<a href="" ng-click="selectDepartment(dept.department)">{{dept.department}}</a>

$scope 获得一个新字段、过滤器和方法：

$scope.selectedDepartment = null;
$scope.departmentFilter = function (info) {
    return !$scope.selectedDepartment || info.department === $scope.selectedDepartment;
};
$scope.selectDepartment = function (dept) {
    $scope.selectedDepartment = dept;
};

ng-repeat 更改为：

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

工作版本在这里：http://plnkr.co/edit/4vbvlsejZivio2A4seWa?p=info。

【讨论】：

【解决方案2】：

您也可以查看此版本：http://plnkr.co/edit/CKdAnwB6Muh1j3ohkgFq 在您的菜单中：

<a href="" ng-click="setDept(dept)">{{dept.department}}</a>

在您的控制器中：

 $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>

【讨论】：