I would like to be able to filter by sex by clicking on an anchor but I do not know how to get the value. I tried like this:
<a href="#" ng-value="mujer" ng-model="busqueda.nombre">Mujeres</a>
<tr ng-repeat="persona in personas | filter:busqueda | orderBy:columna:reverse ">
but it does not work
According to the example of the one that I put link it would have to be a string that is looked for in the object. "search.name" in ng-model and in the filter.
<a href="#" ng-value="mujer" ng-model="busqueda.nombre">Mujeres</a>
<tr ng-repeat="persona in personas | filter:busqueda.nombre | orderBy:columna:reverse ">
I did it like this:
<!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>
<a href="#" ng-value="mujer"
ng-model="busqueda.nombre" ng-click="ordenarPor('mujer')">Mujeres</a>
<a href="#" ng-value="mujer" ng-model="busqueda.nombre"
ng-click="ordenarPor('hombre')">Hombres</a> <a href="#"
ng-value="mujer" ng-model="busqueda.nombre"
ng-click="ordenarPor('')">Todos</a>
<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 |
filter:ordenSeleccionado ">
<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>
(function(){
var app = angular.module('universidadApp',[ ]);
app.controller('listadoCtrl', ['$scope', function($scope){
$scope.filter = function(sexo){
$scope.sex = sexo;
console.log(sex)
}
$scope.ordenarPor = function(orden) {
$scope.ordenSeleccionado = orden;
};
$scope.personas=[
{
"id": 0,
"sexo": "hombre",
"nombre": "Kari Carr",
"avatar": "kari.jpg",
"telefono": "(826) 453-3497",
"celular": "(801) 9175-8136"
},
{
"id": 1,
"sexo": "mujer",
"nombre": "Tameka Gamble",
"avatar": "tameka.jpg",
"telefono": "(824) 438-2499",
"celular": "(801) 8595-8337"
},
{
"id": 2,
"sexo": "mujer",
"nombre": "Charity Austin",
"avatar": "charity.jpg",
"telefono": "(817) 512-2258",
"celular": "(801) 9375-3830"
},
{
"id": 3,
"sexo": "mujer",
"nombre": "Slater Hunt",
"avatar": "slater.jpg",
"telefono": "(842) 413-3023",
"celular": "(801) 9555-1729"
},
{
"id": 4,
"sexo": "mujer",
"nombre": "Chen Hanson",
"avatar": "chen.jpg",
"telefono": "(966) 520-2696",
"celular": "(801) 9324-4423"
},
{
"id": 5,
"sexo": "hombre",
"nombre": "Obrien Davis",
"avatar": "obrien.jpg",
"telefono": "(996) 595-3896",
"celular": "(801) 8195-2732"
},
{
"id": 6,
"sexo": "hombre",
"nombre": "Le Haley",
"avatar": "le.jpg",
"telefono": "(967) 527-3286",
"celular": "(801) 8074-5225"
},
{
"id": 7,
"sexo": "hombre",
"nombre": "Lester Carney",
"avatar": "lester.jpg",
"telefono": "(994) 465-3542",
"celular": "(801) 9044-7522"
},
{
"id": 8,
"sexo": "hombre",
"nombre": "Rosario Perry",
"avatar": "rosario.jpg",
"telefono": "(848) 499-2977",
"celular": "(801) 8495-0625"
},
{
"id": 9,
"sexo": "mujer",
"nombre": "Marilyn Huber",
"avatar": "marilyn.jpg",
"telefono": "(982) 580-3235",
"celular": "(801) 8184-2624"
}
];
}]);
})();