Filter by one or more fields

Question

Filter by one or more fields

Navigation

#1 by (0 votes)

0

I'm doing a filter with AngularJS and at the moment I have this code

$scope.buscar = function () {
console.log($scope.guia.standby); }

And so with a whole list of 32 genres of music.

<div class="form-group">
           <label for="sel1">Selecciona un género:</label>
            <select ng-model="guia.standby" class="form-control" id="sel1">
              <option value="all">Todos</option>
              <option value="acustico">Acustico</option>  
              <option value="blues">Blues</option>
              <option value="banda">Banda / Metales</option>
              <option value="niños">Niños</option>
              <option value="circo">Circo / Feria</option>
              <option value="clasica">Clasica</option>

My divs are like this

<div class="col-lg-4 col-md-6 mb-4">
          <div ng-if="guia.standby == 'niños'">
          <div class="card h-100"> 
            <a><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
            <div class="card-body">
              <h4 class="card-title">
                <a>Dulces Sueños</a>
              </h4>
              <h5></h5>
              <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur! Lorem ipsum dolor sit amet.</p>
            </div>
            <div class="card-footer">
              Preview de la canción
              <button onclick="playAudio2()" type="button">Iniciar</button>
              <button onclick="pauseAudio2()" type="button">Pausa </button>
              <br>
              –––––––––––––––––––––––
              Descargar Canción
              <a href="Z:\MUSICA\MÚSICA ORIGINAL - (N.G) infantil, sueños, lullaby, juguetes.wav" download><i class="fas fa-cloud-download-alt"></i></a>
            </div>
          </div>
        </div>
        </div>

So if you manage to filter all the divs that have "children" characteristics but there are some that have up to 5 genera for example

4.- Electronic, rhythmic, pop -

5.- Rhythmic, Electronic, Pop, Children -

8.- Funk, Rock, Jazz, Pop -

9.- Electronic, rock,

How can I do for when they search for electronica I get all those that have that feature or when they search for the same POP, even if they are not of just that gender?

html angularjs

asked by Armando Martinez 16.04.2018 в 23:30

source

1 answer

Add total of several rows that have the same primary key from another table Graph curve of a GPS path or curve sweep

score 0 · Answer 1

what you need are called "filters", and to achieve what you need you could use a code like the following. More information about filters at the following link: AngularJS: API: filter

<div ng-controller="DemoCtrl">
    <button ng-repeat="genero in generos" ng-click="addFiltro(genero)">{{genero}}</button>
    <div ng-repeat="cancion in canciones | filter: filterSongs">
        {{ cancion.nombre }} - {{cancion.genero}}
    </div>
</div>

<script>
    angular.module('appDemo', [])
        .controller('DemoCtrl', function($scope, $http){

            $scope.generos = ['banda', 'salsa', 'pop'];

            $scope.canciones = [{
                nombre: 'Cancion de banda',
                genero: 'banda'
            }, {
                nombre: 'Cancion de salsa',
                genero: 'salsa'
            }, {
                nombre: 'Cancion de pop',
                genero: 'pop'
            }]

            $scope.filtros = [];

            $scope.addFiltro = function(filtro) {
                $scope.filtros.push(filtro);
            };

            $scope.filterSongs = function(cancion) {
                var temp = $scope.filtros.find(filtro => filtro == cancion.genero);
                return $scope.filtros.length == 0 ? !! true : !!temp;
            };
        });
</script>

P.D. The code only shows how to add the filters you need, eliminating them is your task.