Filter ng-repeat in Angular

Question

I searched a lot in google and I found nothing for my problem. My problem is how can I filter my menu option value? I have placed my entire code in below location.

http://plnkr.co/edit/q5WLaIvTN434o4nZNBdR

I have a CSS menu, which have href link but it is located at different div. So how can I filter my result according to menu selection? Please help me for this. Also My search box is hiding below the menu. I tried to give z-index to it. But it isn't working. How can resolve this?

My Menu div is as follows:

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

But container is on different location as below:

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

I placed "menuFilter" but that is not working.

Answer 1

You can also checkout this version: http://plnkr.co/edit/CKdAnwB6Muh1j3ohkgFq In your menu:

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

In your controller:

 $scope.showDept = false;
 $scope.dept = {};
 $scope.setDept = function(d) {
   $scope.dept = d;
   $scope.showDept = true;
 };

ANd in your main container:

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

Answer 2

Just save the value of the selected department and use that in the filter. So, your links would change to:

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

The $scope gets a new field, filter, and method:

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

And the ng-repeat changes to:

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

A working version is here: http://plnkr.co/edit/4vbvlsejZivio2A4seWa?p=info.