Фильтр ng-repeat в Angular

Question

Я много искал в 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", но это не работает.

Answer 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.

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