javascript - filtering more than one value with ngx-filter-pipe angular - Stack Overflow

admin管理员组

文章数量:1289425

I'm using ngx-filter-pipe with angular 4 and I'm stuck with this issue. I managed to filter with one value and now im trying to filter data with more than one value: Here's what I got This is my ponent:

@Component({
  selector: 'deudas-list',
  templateUrl: '../views/deudas-list.html',
  providers: [ DeudaService ]
})
export class DeudasListComponent{
  public titulo: string;
  public  deudas: Deuda[];
  public  userFilter: any = { mes: '' };

  constructor(
      private _route: ActivatedRoute,
      private _router: Router,
      private _productoService: DeudaService
  ) {
    this.titulo = 'Listado de Pagos:';
  }

  ngOnInit() {
    this._productoService.getDeudas().subscribe(
      result =>{
          console.log(result['Cuotas'].Cuota);
          this.deudas = result['Cuotas'].Cuota;
      },
      error => {
        console.log(<any>error);
      }
    );
  }
}

This is my view

<div class="form-group has-feedback">
  <label for="term" class="sr-only">Search</label>
  <input type="text" name="term" [(ngModel)]="userFilter.mes" class="form-control" id="term" placeholder="Buscar por mes...">
  <span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
<div *ngIf="deudas" class="table-responsive col-lg-12 tablilla">
  <table class="table table-bordered table-striped table-responsive">
    <tbody>
      <tr *ngFor="let deuda of deudas | filterBy: userFilter | paginate: {itemsPerPage:10,currentPage: p}">
        <td>{{deuda.nombre_edificio}}</td>
        <td>{{deuda.numero_dpto}}</td>
        <td>{{deuda.Annio}}</td>
        <td>{{deuda.mes}}</td>
        <td>{{deuda.nombre_tipo_cuota}}</td>
        <td>{{deuda.monto_cuota}}</td>
        <td>{{deuda.nombre_estado_cuota}}</td>
        <td>{{deuda.fecha_pago}}</td>
      </tr>
    </tbody>
  </table>
  <pagination-controls (pageChange)="p = $event" class="paginador"></pagination-controls>
</div>

I tried multiple things but I cant make it work Here's the documentation I'm following I cant get $or filter to work as shown

This is the data I'm getting from a ws

as you can see im using mes to filter but i'd like to use more than one <input type="text" name="term" [(ngModel)]="userFilter.mes" class="form-control" id="term" placeholder="Buscar por mes...">

any help would be appreciated.

I'm using ngx-filter-pipe with angular 4 and I'm stuck with this issue. I managed to filter with one value and now im trying to filter data with more than one value: Here's what I got This is my ponent:

@Component({
  selector: 'deudas-list',
  templateUrl: '../views/deudas-list.html',
  providers: [ DeudaService ]
})
export class DeudasListComponent{
  public titulo: string;
  public  deudas: Deuda[];
  public  userFilter: any = { mes: '' };

  constructor(
      private _route: ActivatedRoute,
      private _router: Router,
      private _productoService: DeudaService
  ) {
    this.titulo = 'Listado de Pagos:';
  }

  ngOnInit() {
    this._productoService.getDeudas().subscribe(
      result =>{
          console.log(result['Cuotas'].Cuota);
          this.deudas = result['Cuotas'].Cuota;
      },
      error => {
        console.log(<any>error);
      }
    );
  }
}

This is my view

<div class="form-group has-feedback">
  <label for="term" class="sr-only">Search</label>
  <input type="text" name="term" [(ngModel)]="userFilter.mes" class="form-control" id="term" placeholder="Buscar por mes...">
  <span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
<div *ngIf="deudas" class="table-responsive col-lg-12 tablilla">
  <table class="table table-bordered table-striped table-responsive">
    <tbody>
      <tr *ngFor="let deuda of deudas | filterBy: userFilter | paginate: {itemsPerPage:10,currentPage: p}">
        <td>{{deuda.nombre_edificio}}</td>
        <td>{{deuda.numero_dpto}}</td>
        <td>{{deuda.Annio}}</td>
        <td>{{deuda.mes}}</td>
        <td>{{deuda.nombre_tipo_cuota}}</td>
        <td>{{deuda.monto_cuota}}</td>
        <td>{{deuda.nombre_estado_cuota}}</td>
        <td>{{deuda.fecha_pago}}</td>
      </tr>
    </tbody>
  </table>
  <pagination-controls (pageChange)="p = $event" class="paginador"></pagination-controls>
</div>

I tried multiple things but I cant make it work Here's the documentation I'm following https://github./VadimDez/ngx-filter-pipe I cant get $or filter to work as shown

This is the data I'm getting from a ws

as you can see im using mes to filter but i'd like to use more than one <input type="text" name="term" [(ngModel)]="userFilter.mes" class="form-control" id="term" placeholder="Buscar por mes...">

any help would be appreciated.

• javascript
• angular
• typescript
• angularjs-filter

Share Improve this question Follow edited Sep 22, 2017 at 6:02 Rildo Gomez asked Sep 18, 2017 at 23:12 Rildo GomezRildo Gomez 30588 silver badges2222 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3 +25

if you are using same data type for filtering a value you can do it in same filter but if you want different result you can use if else conditions or switch condition for different result as your requirements

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
    name: 'CurrencyFilter',
    pure: false
})
export class CurrencyFilterPipe implements PipeTransform {
    transform(items: number): any {
        var OrigionalValue = items;
        var franctionCount = parseInt(abp.session.crNoOfDgtsAftrDecimal);
        var value = items.toFixed(franctionCount);
        var maSaperatedVal = value.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1" + abp.session.crDgtGrpSymbol + "");
       var selectedSymbol = abp.session.crCurrencySymbol;
        var selectedSymbol = "";
      var PosCurrFormat = abp.session.crPositivCurrencyFrmt;
        var NgtvCurrFormat = abp.session.crNagativeCurrencyFrmt;
        var FinalValue;
        if (items > 0)
        {
            switch (PosCurrFormat) {
                case "$1.1":
                    FinalValue = selectedSymbol + maSaperatedVal;
                    break;
                case "1.1$":
                    FinalValue = maSaperatedVal + selectedSymbol ;
                    break;
                case "$ 1.1":
                    FinalValue = selectedSymbol+" "+ maSaperatedVal;
                    break;
                case "1.1 $":
                    FinalValue = maSaperatedVal + " " + selectedSymbol;
                    break;
            }
            return FinalValue
        }
        if (items < 0) {
             maSaperatedVal = maSaperatedVal.replace('-','')
            switch (NgtvCurrFormat) {
                case "($1.1)": FinalValue = "("+selectedSymbol + maSaperatedVal+")"; break;
                case "-$1.1": FinalValue = "-"+selectedSymbol + maSaperatedVal; break;
                case "$-1.1": FinalValue = selectedSymbol + "-"+ maSaperatedVal; break;
                case "$1.1-": FinalValue = selectedSymbol + maSaperatedVal + "-" ; break;
                case "(1.1$)": FinalValue = "(" + maSaperatedVal + selectedSymbol + ")"; break;
                case "-1.1$": FinalValue = "-" + maSaperatedVal + selectedSymbol; break;
                case "1.1-$": FinalValue = maSaperatedVal + "-"+ selectedSymbol ; break;
                case "1.1$-": FinalValue = maSaperatedVal+selectedSymbol + "-"; break;
                case "-1.1 $": FinalValue = "-" + maSaperatedVal +" "+ selectedSymbol ; break;
                case "-$ 1.1": FinalValue = "-" + " "+ selectedSymbol + maSaperatedVal; break;
                case "1.1 $-": FinalValue = maSaperatedVal + " " + selectedSymbol  + "-"; break;
                case "$ 1.1-": FinalValue = selectedSymbol + " " + maSaperatedVal + "-"; break;
                case "$ -1.1": FinalValue = selectedSymbol + " " + "-" + maSaperatedVal; break;
                case "1.1- $": FinalValue = maSaperatedVal + "-" + " " + selectedSymbol; break;
                case "($ 1.1)": FinalValue = "(" + selectedSymbol + " " + maSaperatedVal + ")"; break;
                case "(1.1 $)": FinalValue = "(" + maSaperatedVal +" "+ selectedSymbol + ")"; break;
            }
            return FinalValue
        }
        return FinalValue;
    }
}

Not sure if i got your question correctly.

Do you want to filter by more than one field ? If so - just set more fields to filter object

for example if your filter object is userFilter and your already have one input that sets value to field mes

<input type="text" name="term" [(ngModel)]="userFilter.mes" class="form-control" id="term" placeholder="Buscar por mes...">

add another input that sets value for example to filter by Annio:

<input type="text" name="Annio" [(ngModel)]="userFilter.Annio" class="form-control" placeholder="Annio">

Hope this helps

    @Component({
      selector: 'deudas-list',
      templateUrl: '../views/deudas-list.html',
      providers: [ DeudaService ]
    })
    export class DeudasListComponent{
      public titulo: string;
      public  deudas: Deuda[];
      public textFilter:string = ""
      public  userFilter: any = { mes: '' , Annio : '' };

      constructor(
          private _route: ActivatedRoute,
          private _router: Router,
          private _productoService: DeudaService
      ) {
        this.titulo = 'Listado de Pagos:';
      }

       applyNGXFilter(){
           this.userFilter = {
               $or : [ 
                   { 'mes' : this.textFilter} 
               ] , 
               [ 
                   { 'Annio' : this.textFilter } 
               ]
           }
      }

      ngOnInit() {
        this._productoService.getDeudas().subscribe(
          result =>{
              console.log(result['Cuotas'].Cuota);
              this.deudas = result['Cuotas'].Cuota;
          },
          error => {
            console.log(<any>error);
          }
        );
      }
    }

<div class="form-group has-feedback">
  <label for="term" class="sr-only">Search</label>
  <input type="text" name="term" [(ngModel)]="textFilter" (change)="applyNGXFilter()" class="form-control" id="term" placeholder="Buscar por mes...">
  <span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
<div *ngIf="deudas" class="table-responsive col-lg-12 tablilla">
  <table class="table table-bordered table-striped table-responsive">
    <tbody>
      <tr *ngFor="let deuda of deudas | filterBy: userFilter | paginate: {itemsPerPage:10,currentPage: p}">
        <td>{{deuda.nombre_edificio}}</td>
        <td>{{deuda.numero_dpto}}</td>
        <td>{{deuda.Annio}}</td>
        <td>{{deuda.mes}}</td>
        <td>{{deuda.nombre_tipo_cuota}}</td>
        <td>{{deuda.monto_cuota}}</td>
        <td>{{deuda.nombre_estado_cuota}}</td>
        <td>{{deuda.fecha_pago}}</td>
      </tr>
    </tbody>
  </table>
  <pagination-controls (pageChange)="p = $event" class="paginador"></pagination-controls>
</div>

本文标签： javascriptfiltering more than one value with ngxfilterpipe angularStack Overflow