Olá, o código abaixo funciona 99%, falta apenas eu colocar o ng-show no < h5 >, porém não estou conseguindo.
O critério: é exibir o nome do grupo somente se existir o item do grupo na lista após a busca.
A busca funciona, porém exibe o nome do grupo, mesmo com resultado vazio.
Por Exemplo: No campo de Filtrar, se eu digitar "Clientes" ele exibe o Grupo: Cadastros, porém ele também exibe Grupo: Movimentações e Preferências. Gostaria que não exibir o Grupo Movimentações e Preferências.
Podem me ajudar?
Veja o Exemplo Funcionando: http://plnkr.co/edit/E4x6pFaKjiReshT44ess?p=preview
angular.module("app", []);
angular.module("app").controller("menuCtrl", function ($scope) {
$scope.menu_side_bar = [
{menu_titulo: "Clientes", menu_link: "#", menu_icon: "fa clip-users", grupo_menu: "Cadastros"},
{menu_titulo: "Fornecedores", menu_link: "#", menu_icon: "fa fa-building", grupo_menu: "Cadastros"},
{menu_titulo: "Transportadoras", menu_link: "#", menu_icon: "fa fa-truck", grupo_menu: "Cadastros"},
{menu_titulo: "Pedidos", menu_link: "#", menu_icon: "clip-cart", grupo_menu: "Movimentações"},
{menu_titulo: "Ordens de Serviço", menu_link: "#", menu_icon: "fa fa-inbox", grupo_menu: "Movimentações"},
{menu_titulo: "Emitir Nota Fiscal", menu_link: "#", menu_icon: "fa clip-note", grupo_menu: "Movimentações"},
{menu_titulo: "Avisos por E-mail", menu_link: "#", menu_icon: "fa fa-envelope-o", grupo_menu: "Preferências"},
{menu_titulo: "Configurações", menu_link: "#", menu_icon: "fa fa-gear", grupo_menu: "Preferências"}
];
var indexedTeams = [];
$scope.menu_categoria_filtrar = function() {
indexedTeams = [];
return $scope.menu_side_bar;
}
$scope.filtrar_categoria = function(menu_side) {
var teamIsNew = indexedTeams.indexOf(menu_side.grupo_menu) == -1;
if (teamIsNew) {
indexedTeams.push(menu_side.grupo_menu);
}
return teamIsNew;
}
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Page Title</title>
</head>
<body>
<div class="users-list" ng-controller="menuCtrl">
<div class="user-chat-form sidebar-content">
<div class="input-group">
<input type="text" ng-model="pesquisarMenu" placeholder="Filtrar no Menu..." class="form-control">
</div>
</div>
<div ng-repeat="menu_categoria in menu_categoria_filtrar()| filter:filtrar_categoria">
<h5 class="sidebar-title">{{menu_categoria.grupo_menu}}</h5>
<ul class="main-navigation-menu" style="background-color:#FCFCFC; width: 98%;margin: 0 auto;">
<li ng-repeat="menu_side in menu_side_bar | filter:{grupo_menu: menu_categoria.grupo_menu, menu_titulo:pesquisarMenu}">
<a href="{{menu_side.menu_link}}"><i class="{{menu_side.menu_icon}}" style="width:20px;"></i>
<span class="title"> {{menu_side.menu_titulo}} </span>
</a>
</li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
</body>
</html>