Ionic 3 Filter List
I'm stuck here
When I clicked the list, nothing happens and the console don't show anything. I use the search filter typescript into list filter. I'm not good in ionic especially angular js.
popular.html:
<ion-item>
<ion-select (click)="this.filterService.getYear($event)" >
<ion-option value="first">1st Year</ion-option>
<ion-option value="second">2nd Year</ion-option>
<ion-option value="third">3rd Year</ion-option>
<ion-option valur="fourth">4th Year</ion-option>
<ion-option value="fifth">5th Year</ion-option>
</ion-select>
</ion-item>
filter.ts:
getYear(searchbar, item)
{
let nav = this.app.getActiveNav();
console.log(this.posts);
this.keyboard.close();
this.initializeItems();
var q = searchbar.srcElement.value;
if (!q) {
return;
}
this.filters = this.posts.filter((value) => {
console.log(value);
if (value.data().year && q) {
if (value.data().year.toLowerCase().indexOf(q.toLowerCase()) > -1) {
return true;
}
return false;
}
});
}
typescript ionic3
edited Nov 23 '18 at 13:41
AS Mackay
2,01351121
asked Nov 23 '18 at 11:03
D.BacarisasD.Bacarisas
32
add a comment |
I'm stuck here
When I clicked the list, nothing happens and the console don't show anything. I use the search filter typescript into list filter. I'm not good in ionic especially angular js.
popular.html:
<ion-item>
<ion-select (click)="this.filterService.getYear($event)" >
<ion-option value="first">1st Year</ion-option>
<ion-option value="second">2nd Year</ion-option>
<ion-option value="third">3rd Year</ion-option>
<ion-option valur="fourth">4th Year</ion-option>
<ion-option value="fifth">5th Year</ion-option>
</ion-select>
</ion-item>
filter.ts:
getYear(searchbar, item)
{
let nav = this.app.getActiveNav();
console.log(this.posts);
this.keyboard.close();
this.initializeItems();
var q = searchbar.srcElement.value;
if (!q) {
return;
}
this.filters = this.posts.filter((value) => {
console.log(value);
if (value.data().year && q) {
if (value.data().year.toLowerCase().indexOf(q.toLowerCase()) > -1) {
return true;
}
return false;
}
});
}
typescript ionic3
edited Nov 23 '18 at 13:41
AS Mackay
2,01351121
asked Nov 23 '18 at 11:03
D.BacarisasD.Bacarisas
32
add a comment |
I'm stuck here
When I clicked the list, nothing happens and the console don't show anything. I use the search filter typescript into list filter. I'm not good in ionic especially angular js.
popular.html:
<ion-item>
<ion-select (click)="this.filterService.getYear($event)" >
<ion-option value="first">1st Year</ion-option>
<ion-option value="second">2nd Year</ion-option>
<ion-option value="third">3rd Year</ion-option>
<ion-option valur="fourth">4th Year</ion-option>
<ion-option value="fifth">5th Year</ion-option>
</ion-select>
</ion-item>
filter.ts:
getYear(searchbar, item)
{
let nav = this.app.getActiveNav();
console.log(this.posts);
this.keyboard.close();
this.initializeItems();
var q = searchbar.srcElement.value;
if (!q) {
return;
}
this.filters = this.posts.filter((value) => {
console.log(value);
if (value.data().year && q) {
if (value.data().year.toLowerCase().indexOf(q.toLowerCase()) > -1) {
return true;
}
return false;
}
});
}
typescript ionic3
edited Nov 23 '18 at 13:41
AS Mackay
2,01351121
asked Nov 23 '18 at 11:03
D.BacarisasD.Bacarisas
32
I'm stuck here
When I clicked the list, nothing happens and the console don't show anything. I use the search filter typescript into list filter. I'm not good in ionic especially angular js.
popular.html:
<ion-item>
<ion-select (click)="this.filterService.getYear($event)" >
<ion-option value="first">1st Year</ion-option>
<ion-option value="second">2nd Year</ion-option>
<ion-option value="third">3rd Year</ion-option>
<ion-option valur="fourth">4th Year</ion-option>
<ion-option value="fifth">5th Year</ion-option>
</ion-select>
</ion-item>
filter.ts:
getYear(searchbar, item)
{
let nav = this.app.getActiveNav();
console.log(this.posts);
this.keyboard.close();
this.initializeItems();
var q = searchbar.srcElement.value;
if (!q) {
return;
}
this.filters = this.posts.filter((value) => {
console.log(value);
if (value.data().year && q) {
if (value.data().year.toLowerCase().indexOf(q.toLowerCase()) > -1) {
return true;
}
return false;
}
});
}
typescript ionic3
typescript ionic3
edited Nov 23 '18 at 13:41
AS Mackay
2,01351121
asked Nov 23 '18 at 11:03
D.BacarisasD.Bacarisas
32
edited Nov 23 '18 at 13:41
AS Mackay
2,01351121
asked Nov 23 '18 at 11:03
D.BacarisasD.Bacarisas
32
edited Nov 23 '18 at 13:41
AS Mackay
2,01351121
edited Nov 23 '18 at 13:41
AS Mackay
2,01351121
edited Nov 23 '18 at 13:41
AS Mackay
2,01351121
2,01351121
asked Nov 23 '18 at 11:03
D.BacarisasD.Bacarisas
32
asked Nov 23 '18 at 11:03
D.BacarisasD.Bacarisas
32
asked Nov 23 '18 at 11:03
D.BacarisasD.Bacarisas
32
32
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
I think you need to use the ngModel data binding for this, as described in the documentation
<ion-item>
<ion-label>Gender</ion-label>
<ion-select [(ngModel)]="gender">
<ion-option value="f">Female</ion-option>
<ion-option value="m">Male</ion-option>
</ion-select>
</ion-item>
For your example, this would change to
<ion-select [(ngModel)]=“filterService.getYear($event)”>
answered Nov 24 '18 at 18:20
JoshJosh
161
[Angular] Parser Error: Unexpected token '=' at column 16 in [getYear($event)=$event]
– D.Bacarisas
Nov 25 '18 at 7:47
I got it. I used this: <ion-select [(ngModel)]="year" (ionChange)="this.filterService.getItems(year)">
– D.Bacarisas
Nov 25 '18 at 8:34
add a comment |
You should be using (ionChange) instead of (click), like
<ion-select (ionChange)="getYear($event)">
Or probably filterService.getYear($event) in your case, although I am not a big fan of accessing services from the template.
The getYear function will be called with the value of selected item, ie, "first", "second" etc, and hence should ideally have a single argument, instead of 2.
Example Code/Preview
answered Nov 23 '18 at 12:40
rjvrjv
3,23012045
Thanks, but I think that this typescript of search filter is not applicable to the list filter.
– D.Bacarisas
Nov 23 '18 at 13:33
add a comment |
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53445475%2fionic-3-filter-list%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
I think you need to use the ngModel data binding for this, as described in the documentation
<ion-item>
<ion-label>Gender</ion-label>
<ion-select [(ngModel)]="gender">
<ion-option value="f">Female</ion-option>
<ion-option value="m">Male</ion-option>
</ion-select>
</ion-item>
For your example, this would change to
<ion-select [(ngModel)]=“filterService.getYear($event)”>
answered Nov 24 '18 at 18:20
JoshJosh
161
[Angular] Parser Error: Unexpected token '=' at column 16 in [getYear($event)=$event]
– D.Bacarisas
Nov 25 '18 at 7:47
I got it. I used this: <ion-select [(ngModel)]="year" (ionChange)="this.filterService.getItems(year)">
– D.Bacarisas
Nov 25 '18 at 8:34
add a comment |
I think you need to use the ngModel data binding for this, as described in the documentation
<ion-item>
<ion-label>Gender</ion-label>
<ion-select [(ngModel)]="gender">
<ion-option value="f">Female</ion-option>
<ion-option value="m">Male</ion-option>
</ion-select>
</ion-item>
For your example, this would change to
<ion-select [(ngModel)]=“filterService.getYear($event)”>
answered Nov 24 '18 at 18:20
JoshJosh
161
[Angular] Parser Error: Unexpected token '=' at column 16 in [getYear($event)=$event]
– D.Bacarisas
Nov 25 '18 at 7:47
I got it. I used this: <ion-select [(ngModel)]="year" (ionChange)="this.filterService.getItems(year)">
– D.Bacarisas
Nov 25 '18 at 8:34
add a comment |
I think you need to use the ngModel data binding for this, as described in the documentation
<ion-item>
<ion-label>Gender</ion-label>
<ion-select [(ngModel)]="gender">
<ion-option value="f">Female</ion-option>
<ion-option value="m">Male</ion-option>
</ion-select>
</ion-item>
For your example, this would change to
<ion-select [(ngModel)]=“filterService.getYear($event)”>
answered Nov 24 '18 at 18:20
JoshJosh
161
I think you need to use the ngModel data binding for this, as described in the documentation
<ion-item>
<ion-label>Gender</ion-label>
<ion-select [(ngModel)]="gender">
<ion-option value="f">Female</ion-option>
<ion-option value="m">Male</ion-option>
</ion-select>
</ion-item>
For your example, this would change to
<ion-select [(ngModel)]=“filterService.getYear($event)”>
answered Nov 24 '18 at 18:20
JoshJosh
161
answered Nov 24 '18 at 18:20
JoshJosh
161
answered Nov 24 '18 at 18:20
JoshJosh
161
answered Nov 24 '18 at 18:20
JoshJosh
161
161
[Angular] Parser Error: Unexpected token '=' at column 16 in [getYear($event)=$event]
– D.Bacarisas
Nov 25 '18 at 7:47
I got it. I used this: <ion-select [(ngModel)]="year" (ionChange)="this.filterService.getItems(year)">
– D.Bacarisas
Nov 25 '18 at 8:34
add a comment |
[Angular] Parser Error: Unexpected token '=' at column 16 in [getYear($event)=$event]
– D.Bacarisas
Nov 25 '18 at 7:47
I got it. I used this: <ion-select [(ngModel)]="year" (ionChange)="this.filterService.getItems(year)">
– D.Bacarisas
Nov 25 '18 at 8:34
[Angular] Parser Error: Unexpected token '=' at column 16 in [getYear($event)=$event]
– D.Bacarisas
Nov 25 '18 at 7:47
[Angular] Parser Error: Unexpected token '=' at column 16 in [getYear($event)=$event]
– D.Bacarisas
Nov 25 '18 at 7:47
I got it. I used this: <ion-select [(ngModel)]="year" (ionChange)="this.filterService.getItems(year)">
– D.Bacarisas
Nov 25 '18 at 8:34
I got it. I used this: <ion-select [(ngModel)]="year" (ionChange)="this.filterService.getItems(year)">
– D.Bacarisas
Nov 25 '18 at 8:34
add a comment |
You should be using (ionChange) instead of (click), like
<ion-select (ionChange)="getYear($event)">
Or probably filterService.getYear($event) in your case, although I am not a big fan of accessing services from the template.
The getYear function will be called with the value of selected item, ie, "first", "second" etc, and hence should ideally have a single argument, instead of 2.
Example Code/Preview
answered Nov 23 '18 at 12:40
rjvrjv
3,23012045
Thanks, but I think that this typescript of search filter is not applicable to the list filter.
– D.Bacarisas
Nov 23 '18 at 13:33
add a comment |
You should be using (ionChange) instead of (click), like
<ion-select (ionChange)="getYear($event)">
Or probably filterService.getYear($event) in your case, although I am not a big fan of accessing services from the template.
The getYear function will be called with the value of selected item, ie, "first", "second" etc, and hence should ideally have a single argument, instead of 2.
Example Code/Preview
answered Nov 23 '18 at 12:40
rjvrjv
3,23012045
Thanks, but I think that this typescript of search filter is not applicable to the list filter.
– D.Bacarisas
Nov 23 '18 at 13:33
add a comment |
You should be using (ionChange) instead of (click), like
<ion-select (ionChange)="getYear($event)">
Or probably filterService.getYear($event) in your case, although I am not a big fan of accessing services from the template.
The getYear function will be called with the value of selected item, ie, "first", "second" etc, and hence should ideally have a single argument, instead of 2.
Example Code/Preview
answered Nov 23 '18 at 12:40
rjvrjv
3,23012045
You should be using (ionChange) instead of (click), like
<ion-select (ionChange)="getYear($event)">
Or probably filterService.getYear($event) in your case, although I am not a big fan of accessing services from the template.
The getYear function will be called with the value of selected item, ie, "first", "second" etc, and hence should ideally have a single argument, instead of 2.
Example Code/Preview
answered Nov 23 '18 at 12:40
rjvrjv
3,23012045
answered Nov 23 '18 at 12:40
rjvrjv
3,23012045
answered Nov 23 '18 at 12:40
rjvrjv
3,23012045
answered Nov 23 '18 at 12:40
rjvrjv
3,23012045
3,23012045
Thanks, but I think that this typescript of search filter is not applicable to the list filter.
– D.Bacarisas
Nov 23 '18 at 13:33
add a comment |
Thanks, but I think that this typescript of search filter is not applicable to the list filter.
– D.Bacarisas
Nov 23 '18 at 13:33
Thanks, but I think that this typescript of search filter is not applicable to the list filter.
– D.Bacarisas
Nov 23 '18 at 13:33
Thanks, but I think that this typescript of search filter is not applicable to the list filter.
– D.Bacarisas
Nov 23 '18 at 13:33
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53445475%2fionic-3-filter-list%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
