How to look up various data in an angularjs property by means of Checkbox?

Question

How to look up various data in an angularjs property by means of Checkbox?

Navigation

#1 by (0 votes)

1

I have two checkboxes, if one is selected, he brings me the men and if I select the other he brings me the women, but I want an option where I can select the two and bring me both. I want to do that with other fields.

<body>

    <div class="container" ng-controller="listadoCtrl">

        <h1>Filtros</h1>
        <h4>Para el ng-repeat</h4>
        <hr>

        <div class="row">
            Busqueda:

            <input type="checkbox" name=""  ng-model="busqueda.sexo" ng-true-value="'mujer'" ng-false-value="''">

            <input type="checkbox" name=""  ng-model="busqueda.sexo" ng-true-value="'hombre'" ng-false-value="''">

        <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:{ sexo:'mujer',sexo:'hombre mujer'} | 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>

javascript angularjs angular

asked by Angel 04.10.2018 в 23:47

source

1 answer

Sort from highest to lowest in java with Quicksort Styles bar and text format in QTextEdit [closed]

score 0 · Answer 1

Observing a little what you need I have thought about doing the following exercise that can help you achieve a solution, what you do is create a función called filterForSexo() where it is added to ng-repeat

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {

    $scope.personas = [
        {
            id: 0,
            nombre: "Carlos",
            sexo: "hombre",
            cantidad: 55,
            celular: "315998889"
        },
        {
            id: 1,
            nombre: "Maria Elena",
            sexo: "mujer",
            cantidad: 12,
            celular: "6556655"
        },
        {
            id: 2,
            nombre: "Arturo Faustino",
            sexo: "hombre",
            cantidad: 4,
            celular: "00000000"
        },
        {
            id: 3,
            nombre: "Roberta Carlos",
            sexo: "hombre mujer",
            cantidad: 8,
            celular: "858484"
        },
        {
            id: 4,
            nombre: "Luis",
            cantidad: 888,
            celular: "00-000"
        },
        {
            id: 5,
            nombre: "Stuart"
        }
    ];

    $scope.filterPerson = function() {
        if ($scope.busqueda.sexo) {
            $scope.filterForSexo = function(item) {
                 return item.sexo;
            };
        } else {
            $scope.filterForSexo = function(item) {
                 return item;
            };
        }
        
    }

});

<!DOCTYPE html>
<html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <body>
        <div ng-app="myApp" ng-controller="myCtrl">
        Busqueda:
            <input type="checkbox" ng-model="busqueda.sexo" ng-click="filterPerson()">

            <table class="table table-striped">
                <tr>
                    <th>id</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>cantidad</th>
                    <th>celular</th>
                </tr>

                <tr ng-repeat="persona in personas | filter: filterForSexo">
                    
                    <td> {{ persona.id }} </td>
                    <td> {{ persona.nombre }}</td>
                    <td> {{ persona.sexo }}</td>
                    <td> {{ persona.cantidad }}</td>
                    <td> {{ persona.celular }}</td>
                </tr>
            </table>
        </div>
    </body>
</html>