I have a data id from a mondo db, where I store just the _id of the item in the data record for my object.
its a multi-select, so there might be more than 1
I use ion-select, and the select-option to be able to compare the data record _id, with the list of fields being shown
this worked in V4 angular
angular template segment
<ion-col >
<ion-select
title="Tags"
multiple="true"
id="vtags"
[(ngModel)]="thisviewer.Tags"
[compareWith]="checkSelectedTag"
okText="Okay"
cancelText="Dismiss"
>
<ion-label>Tags</ion-label>
<ion-option
*ngFor="let tag of data.Tags"
value="{{tag._id}}">{{tag.value}}
</ion-option>
</ion-select>
</ion-col>
vue template segment
<ion-col>
<ion-select
title="Tags"
multiple="true"
id="vtags"
v-model="viewercopy.Tags"
compareWith="checkSelectedTag"
compare-with="checkSelectedTag"
okText="Okay"
cancelText="Dismiss"
>
<ion-label>Tags</ion-label>
<ion-select-option
v-for="(tag) in tags" :key="tag.id"
:value="tag.id" >{{tag.Value}}
</ion-select-option>
</ion-select>
</ion-col>
methods
methods: {
checkSelectedTag(tag1, tag2){
console.log('check tag, comparing '+tag1+' with '+tag2)
return tag1==tag2;
},
closeModal() {
console.log("in closemodal");
},
saveModal() {
console.log("in savemodal");
}
},
the save/close functions fire on push button in the mode
the OKAY and Dismiss buttons work on the options modal.
I have tried the property as
compareWith=
compare-with=
only the 1st three should be selected, but the compareWith function is never called.
in the angular model, i used ngModel to connect to the modals data
in vue, it should be v-model
1 Like
show the user the actual Name, not its id as stored in the data record
the data object in the modal is
Viewers: [
{
Name: "viewer1",
id: 1,
Advance: 5,
Tags: [12, 22, 32],
ImageRefreshRate: 10,
Active: false
},
and the list of ‘tags’ in the db is
Tags: [
{ Value: "tag1", id: 12, Description: "tag 1" },
{ Value: "tag2", id: 22, Description: "tag 22" },
{ Value: "tag3", id: 32, Description: "tag 32" },
{ Value: "tag4", id: 42, Description: "tag 42" },
{ Value: "tag5", id: 52, Description: "tag 52" },
{ Value: "tag6", id: 62, Description: "tag 62" }
]
so we loop over (v-for) the db tags, and if the item tag array elment matches should be checked, else not checked
the doc is unclear
By default, the select uses object equality (===) to determine if an option is selected. This can be overridden by providing a property name or a function to the compareWith property.
but then later in properties
**compareWith**
Description
A property name or function used to compare object values
Attribute **compare-with**
Type ((currentValue: any, compareValue: any) => boolean) | null | string | undefined
I have managed to work around all my other blocking troubles except this one…
can’t save new data without this working…
my working project is here
open the app, select the 1st row of the data , single click
click the magnifying glass icon top left, dialog pops up,
drop down the entry for the tags
only the ones represented for this user should be checked
one should be able to come in here and add/remove assigned tags
(you will see the default data, as u don’t have the server locally)
ok, once again the doc is missing a point… its
<ion-col>
<ion-select
title="Tags"
multiple="true"
id="vtags"
v-model="viewercopy.Tags"
:compareWith="checkSelectedTag" // notice the leading colon
okText="Okay"
cancelText="Dismiss"
>
<ion-label>Tags</ion-label>
<ion-select-option
v-for="(tag) in tags" :key="tag.id"
:value="tag.id" >{{tag.Value}}
</ion-select-option>
</ion-select>
</ion-col>
now… it does filter for display properly, and the single selection popup DOES click the only selected
the multi-select doesn’t check any
i notice in the console logs, where I log the compare, it passes in ALL the items a couple times
when the dropdown is opened
comparing 5d3885dacc871e187172505b with 5d3885dacc871e187172505b,5dd4020b5c3eb90f84d85a19
comparing 5d3885e9cc871e187172505c with 5d3885dacc871e187172505b,5dd4020b5c3eb90f84d85a19
comparing 5dd4020b5c3eb90f84d85a19 with 5d3885dacc871e187172505b,5dd4020b5c3eb90f84d85a19
comparing 5f987c4e70de80503428984f with 5d3885dacc871e187172505b,5dd4020b5c3eb90f84d85a19
comparing 5d3885dacc871e187172505b with 5d3885dacc871e187172505b
comparing 5d3885dacc871e187172505b with 5dd4020b5c3eb90f84d85a19
comparing 5d3885e9cc871e187172505c with 5dd4020b5c3eb90f84d85a19
comparing 5dd4020b5c3eb90f84d85a19 with 5dd4020b5c3eb90f84d85a19
one in the data doesn't seem to be checked (ending 8984f below), except with the multi input
[
{
“_id”: “5d3885dacc871e187172505b”,
“value”: “Kristi”,
“description”: “daughter”
},
{
“_id”: “5d3885e9cc871e187172505c”,
“value”: “Charlie”,
“description”: “granson”
},
{
“_id”: “5dd4020b5c3eb90f84d85a19”,
“value”: “Sam”,
“description”: “string”
},
{
“_id”: “5f987c4e70de80503428984f”,
“value”: “sample_tag_name”,
“Description”: “sample tag description”,
“Value”: “sams test”
}
]
ok, that multiple items made me think about testing them as an array … voila is works
the check routine
checkSelectedTag(tag1, tag2){
// check if the secondary tag is an array of multiple
if(Array.isArray(tag2))
// check the array
return tag2.includes(tag1)
// compare individual strings
return tag1===tag2;
},
1 Like
sdetweil, thanks, thanks and again, THANKS
Ionic doc have a lot of failures, it’s horrible
