Skip to content

New features #59

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

New features #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ddf483f
Fixed numbers not been search for bug
Apr 3, 2018
09ef148
added new tests
Apr 3, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 32 additions & 5 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,12 +68,12 @@ And use pipe in your component
import { Component } from '@angular/core';

@Component({
selector: 'example-app',
selector: 'example-app',
template: `
<div>
<input type="text" [(ngModel)]="userFilter.name" placeholder="name">
<ul>
<li *ngFor="let user of users | filterBy: userFilter">{{ user.name }}</li>
<li *ngFor="let user of users | filterBy: { searchTerm: userFilter }">{{ user.name }}</li>

<!-- in case you want to show empty message -->
<li *ngIf="(users | filterBy: userFilter).length === 0">No matching elements</li>
Expand All @@ -88,6 +88,33 @@ export class AppComponent {
}
```

You can also add Strict usage (Match whole word) and pass specific varibles you wish to be filtered.

```ts
import { Component } from '@angular/core';

@Component({
selector: 'example-app',
template: `
<div>
<input type="text" [(ngModel)]="userFilter.firstName" placeholder="name">
<ul>
<li *ngFor="let user of users | filterBy: { searchTerm: userFilter, strict: true, fields: ['firstName'] }">{{ user.firstName }}</li>

<!-- in case you want to show empty message -->
<li *ngIf="(users | filterBy: userFilter).length === 0">No matching elements</li>
</ul>
</div>
`
})

export class AppComponent {
users: any[] = [{ firstName: 'John', lastName: 'smith' }, { firstName: 'Jane', lastName: 'beechems' }, { firstName: 'Mario', lastName: 'man' }];
userFilter: any = { name: '' };
}
```


### $or matching
Use `$or` to filter by more then one values.

Expand All @@ -103,7 +130,7 @@ const filter = { $or: ['German', 'English'] };

In your template:
```html
<div *ngFor="let language of languages | filterBy: filter">
<div *ngFor="let language of languages | filterBy: { searchTerm: filter }">
{{ language }}
</div>
```
Expand Down Expand Up @@ -134,7 +161,7 @@ const filter = {

In your template:
```html
<div *ngFor="let object of languages | filterBy: filter">
<div *ngFor="let object of languages | filterBy: { searchTerm: filter }">
{{ object.language }}
</div>
```
Expand All @@ -158,7 +185,7 @@ class AppComponent {
];

constructor(private filter: FilterPipe) {
let result = this.filter.transform(this.objects, { name: 'J' });
let result = this.filter.transform(this.objects, { searchTerm: { name: 'J' } });
console.log(result); // [{ name: 'John' }, { name: 'Jane' }]
}
}
Expand Down
99 changes: 93 additions & 6 deletions src/app/app.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ <h2>Filter pipe</h2>
</div>
</div>

<div class="mdl-grid">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--12-col">
<h4>Objects</h4>
</div>
Expand Down Expand Up @@ -97,14 +97,101 @@ <h5>After filtering</h5>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of objects | filterBy: objectsFilter">
<tr *ngFor="let item of objects | filterBy: {searchTerm: objectsFilter}">
<td class="mdl-data-table__cell--non-numeric">{{ item | json }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

<div class="mdl-grid">
<div class="mdl-cell mdl-cell--12-col">
<h4>Objects with specific variable filter</h4>
</div>
<div class="mdl-cell mdl-cell--6-col">
<h5>Before filtering</h5>
{{ objects | json }}
</div>
<div class="mdl-cell mdl-cell--6-col">
<h5>After filtering (targetting 'num')</h5>
Filters:
<div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="object.test"
[(ngModel)]="objectsFilter.test"
[value]="objectsFilter.test"
>
<label class="mdl-textfield__label" for="object.test">object.test</label>
</div>
</div>
<div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="object.num"
[(ngModel)]="objectsFilter.num"
[value]="objectsFilter.num"
>
<label class="mdl-textfield__label" for="object.num">object.num</label>
</div>
</div>
<div>
<form id="objectFilter__bool">
<div>
<label>object.bool</label>
</div>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option1-true">
<input [(ngModel)]="objectsFilter.bool"
[value]="true"
type="radio"
id="option1-true"
class="mdl-radio__button"
name="options"
checked
>
<span class="mdl-radio__label">True</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option1-false">
<input [(ngModel)]="objectsFilter.bool"
[value]="false"
type="radio"
id="option1-false"
class="mdl-radio__button"
name="options"
>
<span class="mdl-radio__label">False</span>
</label>
</form>
</div>
<div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input"
type="text"
id="object.nested.val"
[(ngModel)]="objectsFilter.nested.val"
[value]="objectsFilter.nested.val"
>
<label class="mdl-textfield__label" for="object.num">object.nested.val</label>
</div>
</div>

<div>
<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Object</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of objects | filterBy: {searchTerm: objectsFilter, fields: ['num']}">
<td class="mdl-data-table__cell--non-numeric">{{ item | json }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

</div>

<div class="mdl-cell mdl-cell--10-col mdl-cell--1-offset-tablet mdl-cell--1-offset-desktop">
Expand Down Expand Up @@ -139,7 +226,7 @@ <h5>After filtering</h5>
</tr>
</thead>
<tbody>
<tr *ngFor="let string of strings | filterBy: stringsFilter">
<tr *ngFor="let string of strings | filterBy: {searchTerm: stringsFilter}">
<td>{{ string }}</td>
</tr>
</tbody>
Expand Down Expand Up @@ -180,7 +267,7 @@ <h5>After filtering</h5>
</tr>
</thead>
<tbody>
<tr *ngFor="let number of numbers | filterBy: numbersFilter">
<tr *ngFor="let number of numbers | filterBy: {searchTerm: numbersFilter}">
<td>{{ number }}</td>
</tr>
</tbody>
Expand Down Expand Up @@ -239,7 +326,7 @@ <h5>After filtering</h5>
</tr>
</thead>
<tbody>
<tr *ngFor="let bool of booleans | filterBy: boolFilter">
<tr *ngFor="let bool of booleans | filterBy: {searchTerm: boolFilter}">
<td>{{ bool }}</td>
</tr>
</tbody>
Expand Down Expand Up @@ -293,7 +380,7 @@ <h5>After filtering</h5>
</tr>
</thead>
<tbody>
<tr *ngFor="let object of objectsWithGetters | filterBy: objectsWithGettersFilter">
<tr *ngFor="let object of objectsWithGetters | filterBy: {searchTerm: objectsWithGettersFilter}">
<td>{{ object | json }}</td>
</tr>
</tbody>
Expand Down
13 changes: 8 additions & 5 deletions src/app/app.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,11 +39,14 @@ export class AppComponent {
}
];

stringsFilter = 'a';
stringsFilter = '';
strings = [
'asd',
'qwe',
'zxc'
'item 6',
'item 5',
'item 4',
'item 1',
'item 2',
'item 3',
];

numbersFilter = 1;
Expand All @@ -69,6 +72,6 @@ export class AppComponent {

constructor(private filter: FilterPipe) {
// Use filter pipe in your component
console.log(filter.transform(this.objects, { test: 'value' }));
console.log(filter.transform(this.objects, { searchTerm: {test: "value"}}));
}
}
Loading