NG-SHOW in AngularJS after Filter application

Question

NG-SHOW in AngularJS after Filter application

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

Hello, the code below works 99%, I just need to put the ng-show in < h5 & gt ;, but I'm not getting it.

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

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

For example: In the Filter field, if I type "Clients" it displays Group: Entries, but it also displays Group: Moves and Preferences. I would like you not to display the Movements 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><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
    </body>
    </html>

html angularjs

asked by anonymous 18.07.2015 / 04:27

2 answers

Change script variable value via Java application Retrieve input file file with Angular Js

score 1 · Answer 1

Use the same filter that returns the list of links, as 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>

score 0 · Answer 2

Thanks,

In the code below it works, however in the localhost in computer, 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><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
    </body>
    </html>