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>