简体   繁体   中英

Angular JS how can i switch filters on checkbox values changed?

I have this code, now I want to create two checkboxes one for "emp_nome" and another for "local" when I check either of them I can search my input only for those checked values, help, please

<input type="text" id="myInput" ng-model="search.SN" placeholder="Search for names..">
<div style="overflow-x:auto;">

  <table id="myTable">
    <tr style="border-bottom:1px solid black;" class="header">
      <td>ID</td>
      <td>Nome Entidade</td>
      <td>Ultima Localização</td>
      <td>Categoria</td>
      <td>Nº de Reclamações contra Entidade</td>
      <td>Data da última reclamação</td>
    </tr>

    <tr ng-repeat="x in myData | filter: {emp_nome: search.SN} || filter: {local: search.SNs}" id="removal">
      <td>{{ x.id }}</td>
      <td style="background:rgba(0, 159, 255, 0.24);font-size:17px;"><u>{{ x.emp_nome }}</u></td>
      <td>{{ x.local }}</td>
      <td>{{ x.tipo }}</td>
      <td>
        <center>{{ x.emp_rec }}</center>
      </td>
      <td>
        <center>{{ x.data }}</center>
      </td>
    </tr>

  </table>

  <br><br>

</div>

You can make the filter expression dynamically and manage it in your controller. I mean ng-repeat="x in myData | filter: {emp_nome: search.SN}" could be ng-repeat="x in myData | filter: filterObject"

And you could manage to populate this filterObject to have the object you want to use in filter, by using ng-change (in your input text & checkbox) for example

example in ng-change may be:

if (checkboxValue === 'local') { //local checked
  $scope.filterObject = {local: $scope.search.SN};
} else if (checkboxValue === 'emp_nome') {//emp_nome checked
  $scope.filterObject = {emp_nome: $scope.search.SN};
} else { //filter by all
  $scope.filterObject = $scope.search.SN;
}

it's just an example, I don't know how you manage it

Official doc about filter: https://docs.angularjs.org/api/ng/filter/filter

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM