How to show message if fix comes empty when filtering in angularjs?

Question

How to show message if fix comes empty when filtering in angularjs?

Navigation

#1 by (1 votes)

0

What I want is that if there is no data when filtering, show me a message on a div that says: There are no people.

<body>

  <div class="container" ng-controller="listadoCtrl">

    <h1>Filtros</h1>
    <h4>Para el ng-repeat</h4>
    <hr>

    <div class="row">
      Busqueda:
      <br>
      <div data-role="rangeslider">
        <label for="range-1a">Rangeslider:</label>
        <input 
          name="range-1a" ng-model="min" 
          id="range-1a" min="0" max="100" value="0" type="range" />
        <label for="range-1b">Rangeslider:</label>
        <input name="range-1b" ng-model="max"
         id="range-1b" min="0" max="100" value="100" type="range" />
      </div>
      <input type="text" ng-model="busqueda.cantidad" 
        class="form-control" placeholder="Ingrese lo que desea buscar.">            
      <br>

      Sexo:
      <br>
      <select ng-model="busqueda.sexo" class="form-control">
        <option value="">Cualquiera</option>
        <option value="mujer">Mujeres</option>
        <option value="hombre">Hombres</option>
      </select>
      <br>
    </div>

    <table class="table table-striped">
      <tr>
        <th>Avatar</th>
        <th><a class="puntero"
               ng-click="columna='nombre'; reverse = !reverse;"> Nombre</a> </th>
        <th><a class="puntero"
               ng-click="columna='sexo'; reverse = !reverse;"> Sexo</a></th>
        <th>Teléfono</th>
        <th>Celular</th>
      </tr>

      <tr ng-repeat="persona in personas | filter:busqueda | orderBy:columna:reverse ">
        <td> <img ng-src="img/{{ persona.avatar }}" class="avatar img-circle"> </td>
        <td> {{ min }} </td>
        <td> {{ persona.sexo }}</td>
        <td> {{ persona.cantidad }}</td>
        <td> {{ persona.celular }}</td>
      </tr>
    </table>

  </div><!-- fin del listadoCtrl -->

</body>
</html>

angularjs

asked by Angel 05.10.2018 в 00:48

source

1 answer

Call last three values in Firebase Database Android Studio How to solve average within the for? Java Cycle For

score 1 · Answer 1

To do what you need just make sure that your list is greater than 0 and according to that, show a message or another by ng-if or ng-show

var app = angular.module('App', []);
app.controller('ctrl', ['$scope', function($scope){
  $scope.equipos = [
    { id: 1, nombre: 'Manchester United', pais: 'Inglaterra', liga: 'Premier League', logo: 'http://img.irtve.es/css/resources/deportes/equipos/254manchester-united.png' },
    { id: 2, nombre: 'Real Madrid', pais: 'España', liga: 'LaLiga', logo: 'http://1.bp.blogspot.com/-ipDAjpibYHk/VZZL-uAx1NI/AAAAAAAAAZ8/o7RgaeJsCCU/s1600/real%2Bmadrid2%2B256.jpg'},
    { id: 3, nombre: 'Juventus', pais: 'Italia', liga: 'Serie A', logo: 'http://nlive.io/wp-content/uploads/2018/09/juventus-128x128.png' },
    { id: 4, nombre: 'Bayern Munich', pais: 'Alemania', liga: 'Bundesliga', logo: 'https://3.bp.blogspot.com/-Sv4rY162krk/WVDEoCDr6qI/AAAAAAABJzw/HChtLort5gUQE7tSfiC6229vZEx5Kss3ACLcBGAs/s1600/FC%2BBayern%2BMunchen256x.png' },
    { id: 5, nombre: 'Boca Juniors', pais: 'Argentina', liga: 'Superliga Argentina', logo: 'https://k41.kn3.net/9/B/5/F/B/6/792.png' },
    { id: 6, nombre: 'Colo Colo', pais: 'Chile', liga: 'Primera División de Chile', logo: 'https://3.bp.blogspot.com/-qQtLn6629Xw/WWLswL79qeI/AAAAAAABMSQ/_lCPBYri-xIF_3H27ZmY6hO82WDGXWamACLcBGAs/s1600/Colo%2BColo256x.png' },
    { id: 7, nombre: 'Cruzeiro', pais: 'Brasil', liga: 'Campeonato Brasileño de Serie A', logo: 'https://1.bp.blogspot.com/-GIaEThwywo4/WWPNYxyOb4I/AAAAAAABMeo/jwP4PEUcQ9QJNj6PO_tQO81zLk2w_y98ACLcBGAs/s1600/Cruzeiro%2BEsporte%2BClube256x.png' },
    { id: 8, nombre: 'América', pais: 'México', liga: 'Primera División de México', logo: 'https://dbcdnk728du6i.cloudfront.net/teams/logos/128x128/1385-america-de-mexico.png' },
  ]
  
  $scope.displayedTeams = angular.copy($scope.equipos);
  
  $scope.manejarVisibilidad = function(action){
    if(action == 'clear')
      $scope.displayedTeams = [];
    else
      $scope.displayedTeams = angular.copy($scope.equipos);
  }
}])

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container" ng-app="App" ng-controller="ctrl">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Equipo</th>
        <th scope="col">País</th>
        <th scope="col">Liga</th>
        <th scope="col"></th>
      </tr>
    </thead>
    
    <tbody ng-if="displayedTeams.length == 0">
      <td colspan="5" class="text-center">No hay registros...</td>
    </tbody>
    
    <tbody>
      <tr ng-repeat="e in displayedTeams | orderBy:'nombre'">
        <td ng-bind="$index + 1"></td>
        <td ng-bind="e.nombre"></td>
        <td ng-bind="e.pais"></td>
        <td ng-bind="e.liga"></td>
        <td>
          <img src="{{e.logo}}" width="40">
        </td>
      </tr>      
    </tbody>
    
    <tfoot>
      <button type="button" class="btn btn-success mb-2 mt-2 mr-2" ng-click="manejarVisibilidad('reset')">Restablecer</button>
      <button type="button" class="btn btn-warning mb-2 mt-2" ng-click="manejarVisibilidad('clear')">Limpiar</button>
    </tfoot>
  </table>  
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>