1

Me gustaria poder filtrar por sexo al dar clic en una ancla pero no se como obtener el valor. he intentado asi:

<a href="#" ng-value="mujer" ng-model="busqueda.nombre">Mujeres</a>     
<tr ng-repeat="persona in personas | filter:busqueda | orderBy:columna:reverse ">

pero no funciona

1
  • aun sigues con el problema? en que puedo ayudarte.
    – zerokira
    el 16 ago. 2018 a las 19:35

2 respuestas 2

0

Segun el ejemplo del que pongo link tendría que ser un string que se busca en el objeto. "busqueda.nombre" en ng-model y en el filter.

<a href="#" ng-value="mujer" ng-model="busqueda.nombre">Mujeres</a>     
<tr ng-repeat="persona in personas | filter:busqueda.nombre | orderBy:columna:reverse ">

https://docs.angularjs.org/api/ng/filter/filter

0

Lo hice así:

<!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"
      }
    ];



}]);





})();

Tu Respuesta

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

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