0

Lo que deseo es que si al filtrar no hay datos, me muestre un mensaje en un div que diga: No hay personas.

<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>
1
  • puedes colocar el código js donde haces la función búsqueda, para buscar.
    – zerokira
    Commented el 5 oct. 2018 a las 13:17

1 respuesta 1

1

Para realizar lo que necesitas sólo debes asegurarte que tu listado sea mayor a 0 y de acuerdo a eso, mostrar un mensaje u otro mediante ng-if o 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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.