Skip to main content
se eliminaron 96 caracteres en el cuerpo
Origen Enlace
alo Malbarez
  • 9.7k
  • 3
  • 12
  • 29
<body>
 
   
  <div class="container" ng-controller="listadoCtrl">
        
        <h1>Filtros</h1>
        <h4>Para el ng-repeat</h4>
    <hr>
    <hr>
    <div class="row">
      Busqueda:
      <br>
      <div class="row">data-role="rangeslider">
        <label for="range-1a">Rangeslider:</label>
   Busqueda:     <input 
          name="range-1a" ng-model="min" <br>
          id="range-1a" min="0" <divmax="100" data-role="rangeslider">value="0" type="range" />

Rangeslider: Rangeslider:


        <label for="range-1b">Rangeslider:</label>
    Sexo:    <input name="range-1b" ng-model="max"
         id="range-1b" min="0" max="100" value="100" type="range" <br>/>
      </div>
      <select<input type="text" ng-model="busqueda.sexo"cantidad" class="form-control">
        class="form-control" placeholder="Ingrese lo que desea buscar.">   <option value="">Cualquiera</option>
         
      <br>
  <option value="mujer">Mujeres</option>   
      Sexo:
      <br>
    <option value="hombre">Hombres</option>
 <select ng-model="busqueda.sexo" class="form-control">
        <option <value="">Cualquiera</select>option>
        <option value="mujer">Mujeres</option>
   <br>


     <option value="hombre">Hombres</option>
      </div>


select>
      <br>
    </div>
     
    <table class="table table-striped">
            <tr>
           <th>Avatar</th>
     <th>Avatar</th>
   <th><a class="puntero"
            <th> <a class="puntero" ng-click="columna='nombre'; reverse = !reverse;"> Nombre</a> </th>
        <th><a class="puntero"
       <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>
<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">

Rangeslider: Rangeslider:


            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>
<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>
Origen Enlace
Angel
  • 535
  • 3
  • 11
  • 31

Como mostrar mensaje si arreglo viene vacio al filtrar en angularjs?

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">

Rangeslider: Rangeslider:


            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>