I tried to do with this, but it did not work:
<!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>
JS file:
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"
}
];
}]);