Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Danilo Ramon

NG-SHOW no AngularJS após aplicação do Filtro

Por , em Javascript

Recommended Posts

Danilo Ramon    0

Danilo Ramon
Postado

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>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito