[英]Angularjs: ng-repeat filter object within array of objects
我創造了一個解釋我想要實現的東西。 http://plnkr.co/edit/XAghimH20qwxQGjO42gP?p=preview
我有這個對象數組$ scope.menus
$scope.menus = [
{
name: 'Access',
submenu: [
{ name: 'User List'},
]
},
{
name: 'Organization',
submenu: [
{ name: 'City List'},
{ name: 'State List'},
{ name: 'Country List'},
]
},
{
name: 'Upload Logs',
submenu: [
{ name: 'Inventory Uploads'},
]
},
{
name: 'Bulk Logs',
submenu: [
{ name: 'Bulk Renewals'},
]
},
];
對於搜索時的外部菜單，例如Access或Organization ，僅返回搜索到的項目。
但是當搜索內部菜單時，例如像City List ，結果我得到所有其他對象，包括City List 。 我期待只獲得City List 。
我觀察到，對於嵌套的對象數組，過濾器不起作用。
我可能錯了。 請指導我學習新的東西。
更新 @Vivek解決方案。 但現在我面臨另一個問題。 我已經在我現有的數組中添加了一些其他數組。
當我在搜索字段中鍵入Bulk或upload時，會出現子菜單。 但是一旦我輸入第二個單詞（例如Bulk logs或upload logs ），子菜單就會消失。
如果在輸入第一個單詞時出現，為什么在輸入第二個單詞時它會消失。為什么會發生這種情況？
更新感謝大家的時間和回復。
<input type="text" placeholder="Search text" ng-model="menuSearch"> <ul> <li ng-repeat="menu in menus | filter : menuSearch"> <span href="#">{{menu.name}}</span> <ul> <li ng-repeat="submenu in menu.submenu | filter : menuSearch"> <a href="#">{{submenu.name}}</a> </li> </ul> </li> </ul> </div>
你還必須在子菜單ng-repeat中編寫過濾器，如下所示，
<html>
<head>
<title>AngularJS ng-repeat filter</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body ng-app="app">
<div ng-controller="democontroller">
<input type="text" placeholder="Search text" ng-model="menuSearch">
<ul>
<li ng-repeat="menu in menus | filter : menuSearch">
<span href="#">{{menu.name}}</span>
<ul>
<li ng-repeat="submenu in menu.submenu | filter : menuSearch">
<a href="#">{{submenu.name}}</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
過濾器僅應用於第一個循環，您需要在子菜單上ng-repeat添加過濾器，如下所示：
<html>
<head>
<title>AngularJS ng-repeat filter</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body ng-app="app">
<div ng-controller="democontroller">
<input type="text" placeholder="Search text" ng-model="menuSearch">
<ul>
<li ng-repeat="menu in menus | filter : menuSearch">
<span href="#">{{menu.name}}</span>
<ul>
<li ng-repeat="submenu in menu.submenu | filter: menuSearch"> <!--Notice filter added here-->
<a href="#">{{submenu.name}}</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
對於更新的用例，這可能會有所幫助，基本上子菜單上有過濾器，但如果子菜單處於活動狀態或搜索包含菜單中的任何文本，則會顯示主菜單：
<html>
<head>
<title>AngularJS ng-repeat filter</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body ng-app="app">
<div ng-controller="democontroller">
<input type="text" placeholder="Search text" ng-model="menuSearch">
<ul>
<li ng-repeat="menu in menus" ng-if="(menu.submenu | filter: menuSearch).length > 0 || (menu.name.includes(menuSearch))">
<span href="#">{{menu.name}}</span>
<ul>
<li ng-repeat="submenu in menu.submenu | filter : menuSearch">
<a href="#">{{submenu.name}}</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
AngularJs-如何在ng-repeat的每次迭代中過濾嵌套數組對象？
[英]AngularJs - How can I filter through a nested array object in each iteration within ng-repeat?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.