NG-SHOW in Angularjs after Filter application

Asked

Viewed 309 times

1

Hello, the code below works 99%, I only need to put ng-show on < H5 >, but I’m not getting it.

The criterion: is to display the group name only if the group item exists in the list after the search.

The search works, but displays the name of the group, even with empty result.

For example: In the Filter field, if I type "Customers" it displays the Group: Registrations, but it also displays Group: Moves and Preferences. I would like you not to display the Moves and Preferences Group.

Can you help me?

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>

html angularjs

2 answers

1

Use the same filter that returns the link list as the ng-show parameter:

<h5 class="sidebar-title" ng-show="menu_side_bar | filter:{grupo_menu: menu_categoria.grupo_menu, menu_titulo:pesquisarMenu}">{{menu_categoria.grupo_menu}}</h5>

0

Thank you,

In the code below it works, but in the PC localhost, error already appears in the console.

Error: [$rootScope:infdig] http://errors.angularjs.org/1.4.1/$rootScope/infdig?p0=10&p1=%5B%5B%7B%22ms…fer%C3%AAncias%22%2C%22%24%24hashKey%22%3A%22object%3A22%22%7D%5D%7D%5D%5D
at Error (native)
at http://localhost/angular/assets/plugins/angularjs/1.4.1/angular.min.js:6:416
at m.$get.m.$digest (http://localhost/angular/assets/plugins/angularjs/1.4.1/angular.min.js:133:6)
at m.$get.m.$apply (http://localhost/angular/assets/plugins/angularjs/1.4.1/angular.min.js:135:161)
at l (http://localhost/angular/assets/plugins/angularjs/1.4.1/angular.min.js:87:152)
at N (http://localhost/angular/assets/plugins/angularjs/1.4.1/angular.min.js:91:187)
at XMLHttpRequest.x.onload (http://localhost/angular/assets/plugins/angularjs/1.4.1/angular.min.js:92:220)


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" ng-show="menu_side_bar | filter:{grupo_menu: menu_categoria.grupo_menu, menu_titulo:pesquisarMenu}">{{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>

Browser other questions tagged html angularjs

You are not signed in. Login or sign up in order to post.