[英]Filter ng-repeat in Angular
I searched a lot in google and I found nothing for my problem. 我在Google中搜索了很多内容,但没有发现任何问题。 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 http://plnkr.co/edit/q5WLaIvTN434o4nZNBdR
I have a CSS menu, which have href
link but it is located at different div
. 我有一个CSS菜单,该菜单具有href
链接,但它位于不同的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. 我试图给它z-index
。 But it isn't working. 但这不起作用。 How can resolve this? 如何解决呢?
My Menu div
is as follows: 我的菜单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>
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. 我放置了“ menuFilter”,但是没有用。
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
获得一个新的字段,过滤器和方法:
$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
更改为:
ng-repeat="info in empDetails | filter: departmentFilter | orderBy:'Name' | filter:searchTxt"
A working version is here: http://plnkr.co/edit/4vbvlsejZivio2A4seWa?p=info . 工作版本在这里: http : //plnkr.co/edit/4vbvlsejZivio2A4seWa?p=info 。
You can also checkout this version: http://plnkr.co/edit/CKdAnwB6Muh1j3ohkgFq In your menu: 您也可以签出此版本: http : //plnkr.co/edit/CKdAnwB6Muh1j3ohkgFq在菜单中:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.