0

Intente hacer con esto, pero no funciono:

<!DOCTYPE html>
<html ng-app="universidadApp">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Filtros - ng-repeat</title>
        <!-- Incluir Bootstrap -->
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <!-- Animate.css -->
        <link rel="stylesheet" href="css/animate.css">
        <!-- Incluir AngularJS -->
        <script src="js/lib/angular.min.js"></script>
        <script src="js/app.js"></script>
        <style>
            .avatar{
                width: 75px;
                height: 75px;
            }

            .puntero{
                cursor: pointer;
            }
        </style>
    </head>    
    <body>
        <div class="container" ng-controller="listadoCtrl">          
            <h1>Filtros</h1>
            <h4>Para el ng-repeat</h4>
            <hr>          
            <div class="row">
                Busqueda:
                <br>
                <input type="text" ng-model="busqueda.nombre" 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>
            Age Range <input type="number" name="filterAgeMin" ng-model="filterModelMin.edad" /> to <input type="number" name="filterAgeMax" ng-model="filterModelMax.edad" /><br><br>
            {{filterModelMin.edad}}
            <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 persona| filter:byRange('edad', filterModelMin.edad, filterModelMax.edad)| orderBy:columna:reverse ">
                    <td> <img ng-src="img/{{ persona.avatar }}" class="avatar img-circle"> </td>
                    <td> {{ persona.nombre }} </td>
                    <td> {{ persona.sexo }}</td>
                    <td> {{ persona.telefono }}</td>
                    <td> {{ persona.celular }}</td>
                </tr>
            </table>
        </div><!-- fin del listadoCtrl -->
    </body>
</html>


Archivo JS:

var app = angular.module('universidadApp',[ ]);
app.controller('listadoCtrl', ['$scope', function($scope){
      $scope.byRange = function (fieldName, minValue, maxValue) {
        if (minValue === undefined) minValue = Number.MIN_VALUE;
        if (maxValue === undefined) maxValue = Number.MAX_VALUE;

        return function predicateFunc(item) {
          return minValue <= item[fieldName] && item[fieldName] <= maxValue;
        };
      };
    $scope.personas=[
      {
        "id": 0,
        "sexo": "hombre",
        "nombre": "Kari Carr",
        "avatar": "kari.jpg",
        "telefono": "(826) 453-3497",
        "edad":10,
        "celular": "(801) 9175-8136"
      },
      {
        "id": 1,
        "sexo": "mujer",
        "nombre": "Tameka Gamble",
        "avatar": "tameka.jpg",
        "telefono": "(824) 438-2499",
         "edad":20,
        "celular": "(801) 8595-8337"
      },
      {
        "id": 2,
        "sexo": "mujer",
        "nombre": "Charity Austin",
        "avatar": "charity.jpg",
        "telefono": "(817) 512-2258",
         "edad":35,
        "celular": "(801) 9375-3830"
      },
      {
        "id": 3,
        "sexo": "mujer",
        "nombre": "Slater Hunt",
        "avatar": "slater.jpg",
        "telefono": "(842) 413-3023",
         "edad":35,
        "celular": "(801) 9555-1729"
      },
      {
        "id": 4,
        "sexo": "mujer",
        "nombre": "Chen Hanson",
        "avatar": "chen.jpg",
        "telefono": "(966) 520-2696",
         "edad":26,
        "celular": "(801) 9324-4423"
      },
      {
        "id": 5,
        "sexo": "hombre",
        "nombre": "Obrien Davis",
        "avatar": "obrien.jpg",
        "telefono": "(996) 595-3896",
         "edad":30,
        "celular": "(801) 8195-2732"
      },
      {
        "id": 6,
        "sexo": "hombre",
        "nombre": "Le Haley",
        "avatar": "le.jpg",
        "telefono": "(967) 527-3286",
         "edad":24,
        "celular": "(801) 8074-5225"
      },
      {
        "id": 7,
        "sexo": "hombre",
        "nombre": "Lester Carney",
        "avatar": "lester.jpg",
        "telefono": "(994) 465-3542",
         "edad":22,
        "celular": "(801) 9044-7522"
      },
      {
        "id": 8,
        "sexo": "hombre",
        "nombre": "Rosario Perry",
        "avatar": "rosario.jpg",
        "telefono": "(848) 499-2977",
         "edad":21,
        "celular": "(801) 8495-0625"
      },
      {
        "id": 9,
        "sexo": "mujer",
        "nombre": "Marilyn Huber",
        "avatar": "marilyn.jpg",
        "telefono": "(982) 580-3235",
         "edad":20,
        "celular": "(801) 8184-2624"
      }
    ];
}]);

1 respuesta 1

0

A primera vista veo que estas aplicando mal el ng-repeat, te comiste una 'S' en personas

Tendría que quedarte así:

<tr ng-repeat="persona in personas| filter:byRange('edad', filterModelMin.edad, filterModelMax.edad)| orderBy:columna:reverse ">

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.