Search filter with a select

Question

Search filter with a select

Navigation

#1 by (0 votes)

2

They asked me to add a search filter, but the thing is that it is done with Angular the application and I know very little about that.

In the BDD there is a table called guia with a field called standby which generates a 1 and 0 (yes and no).

I got the data to put it in a div as I put it at the end.

My question is:

How can I do the search filter when div is activated with select ?

<select class="form-control" name="standby">
    <option value="" disabled selected>Guías en standby</option>
    <option value="">Todas</option>
    <option value="1">Si</option>
    <option value="0">No</option>
</select>

And when pressing this button, search depending on the options (because they are several filters).

<button ng-click="buscar()" class="btn blue">Buscar</button>

Here it shows the result, depending on a checkbox that I have in another place, if this checkered shows them guia en standby and if you remove the check the div is removed.

<div ng-if="guia.standby==1">
    <div class="label label-default label-sm">Guía en standby</div>
</div>

When you press Si in select , show only the one that says guide in standby .

angularjs

asked by Danny Rodriguez 18.07.2017 в 03:11

source

1 answer

How to get the data of a logged-in user to make his profile? swiftmailer Config

score 0 · Answer 1

Add the ng-model="guia.standby" tag to your select for example.

On your controller, within the buscar() function you can get the value that the <select> takes depending on the user's selection ... for example

$scope.buscar = function () {
    console.log($scope.guia.standby); //Puede imprimir "" ==> Todas, "1" ==> Si, "0" ==> No
}

Regarding your <div> it should be like that% ng-if so you can show the <label> you want.

<div ng-if="guia.standby == '1'">
    <div class="label label-default label-sm">Guía en standby</div>  
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <select ng-model="guia.standby">
    <option value="">Todas</option>
    <option value="1">Si</option>
    <option value="0">No</option>
  </select>
  
  <div ng-if="guia.standby == '1'">
    <p>Guía en standby</p>
  </div>
</div>