Filter Menu Items in AngularJS
Environment
Product | Progress® Kendo UI® Menu for jQuery |
Product Version | Created with the 2019.1.220 version |
Description
How can I have an Angular filter function for the Menu items?
Solution
In the dataSource
, use the text
property of the Menu item.
<div class="demo-section k-content" ng-controller="MyCtrl">
<h4 style="padding-top: 2em;">Preview</h4>
<ul kendo-menu
k-orientation="menu.menuOptions.menuOrientation"
k-rebind="menu.menuOptions"
k-options="menu.menuOptions">
</ul>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.menu = { menuOptions: {
menuOrientation: "horizontal",
scrollable: true,
openOnClick: { openOnClick: true },
showOn: "click",
filter: true,
dataSource: [
{
text: "2nd Item",
cssClass: "myClass",
items: [
{text: "<input type='text' class='form-control' ng-click='$event.stopPropagation()' placeholder='Search by Typing Item Name' ng-model='search2'>", encoded: false},
{text: "<div ng-repeat=\"i in menuItemList2 | filter: search2\"></div>", encoded: false}
]
},
{
text: "First Item",
cssClass: "myClass",
items: [
{ text: "<input type='text' class='form-control' ng-click='$event.stopPropagation()' placeholder='Search by Typing Item Name' ng-model='search1'>", encoded: false },
{text: "<div ng-repeat=\"i in menuItemList1 | filter: search1\"></div>", encoded: false}
]
}
]
},
listItems:[
{menuItems:[
{items:[
{text: "Item 1"},
{text: "Item 2"}]
},
{items:[
{text: "Item 12"},
{text: "Item 22"}]
}
]}
]};
$scope.menuItemList1 = $scope.menu.listItems[0].menuItems[0].items;
$scope.menuItemList2 = $scope.menu.listItems[0].menuItems[1].items
})
</script>