Tips for concealing text in ion-option ionic2

Is there a way to hide text within an ion-option? I'm looking to conceal or remove certain text from displaying in an ion-option without deleting the underlying data. This is important as I want users to be able to choose it.

<ion-select [(ngModel)]="refine" (ionChange)="optionsFn(item, i);" >
        <ion-option [value]="item"  *ngFor="let item of totalfilter ;let i = index" >
          {{item["@NAME"]}}
        </ion-option>
      </ion-select>

Additionally,

this.totalfilter = data.json().FACETLIST.FACET;
          for(let x of this.totalfilter) {
            if(x["@NAME"] == 'local3' || x["@NAME"] == 'Local3') {
              x["@NAME"].hide(); //// I'm unsure how to hide this text
            }

          }

Desired Output:

Current Display                 Desired Display
==================               ======================
book                             book
pen                              pen
school                           school
local3
javascriptangulartypescriptionic-frameworkionic2

Answer №1

To filter the options, you can utilize the filter method and save the filtered results in a new list

public availableOptions: Array<any>;

// ...

this.totalfilter = data.json().FACETLIST.FACET;

// The following code will exclude any options with the name 'Local3' in lowercase
this.availableOptions = this.totalfilter.filter(option => option["@NAME"].toLowerCase() !== 'local3');

After filtering, you can use the updated property in your view

<ion-select [(ngModel)]="refine" (ionChange)="optionsFn(item, i);" >
    <ion-option [value]="item"  *ngFor="let item of availableOptions ;let i = index" >
       {{item["@NAME"]}}
    </ion-option>
 </ion-select>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exporting an HTML table to Excel with JavaScript runs into issues when it encounters the '#' character

Looking for a JavaScript solution to export HTML tables to Excel. I attempted a script that exports tables, but it stops when encountering special characters like '#'. Can someone assist me with this issue? Thank you in advance. <script src= ...

javascripthtmlexcel

Determining the appropriate scenarios for using declare module and declare namespace

Recently, I came across a repository where I was exploring the structure of TypeScript projects. One interesting thing I found was their typings file: /** * react-native-extensions.d.ts * * Copyright (c) Microsoft Corporation. All rights reserved. * Li ...

typescript

I've noticed that the list item vanishes unexpectedly when utilizing Primeng drag-and-drop feature

Whenever I try to drag an item from one list to another in the Primeng picklist, the item disappears until it is dropped. <p-dialog [(visible)]="showMarker" (onHide)="hideDialogChild()" [contentStyle]="{'overflow':'visible'}" h ...

angularprimeng

Struggling to use the uploadFiles function with the kendo-upload component

I'm currently facing an issue with uploading my selected files from my component code. I chose the component code route because I need to upload those files after creating the parent aggregate object. This way, I can assign the necessary IDs to my und ...

angularkendo-ui

Keep a record of the Observable for future subscription in Angular 7

In my scenario, I anticipate that an Angular 7 client may frequently go offline for extended periods of time. When the client is connected, I intend to process HTTP requests as usual using observables. However, in the event of a network disconnection, I p ...

angularrxjslocal-storageobservablesubscribe

Is there a possible solution to overcome the type error when utilizing dynamic environment variables in conjunction with TypeORM and TypeScripts?

I'm currently working on a backend project using the TsED framework, which leverages TypeScript and ExpressJS. To work with TypeORM, I have also integrated the dot-env package in order to utilize custom environment variables sourced from a .env file ...

typescriptexpresstypeorm

The clientWidth property of a div element in React is coming back as null when accessed in the

I'm facing an issue with a React component that contains an image. I require the dimensions of the image (not the window dimensions) for some other operations involving the image element. Everything works fine when I initially render the component, bu ...

javascriptreactjsmaterial-uireact-hooks

Delete the JSON object stored in local storage and reconstruct the array from scratch

I've encountered an issue with deleting an item from LocalStorage...here's the JSON data stored in LocalStorage. { "1461569942024" : {"t_id":1461569942024,"t_build_val":"PreBuild1","t_project_val":"18"}, "1461570048166" : {"t_id":1461570048166 ...

javascriptjsonobjectlocal-storage

Using NextJS getServerSideProps to Transfer Data to Page Component

Having trouble with my JavaScript/NextJS code, and not being an expert in these technologies. I'm using the method export const getServerSideProps: GetServerSideProps = async () => {} to fetch data from an integrated API within NextJS. The code mig ...

javascriptreactjsnext.js

Is transforming lengthy code into a function the way to go?

I have successfully implemented this code on my page without any errors, but I am wondering if there is a more concise way to achieve the same result. Currently, there is a lot of repeated code with only minor changes in class names. Is it possible to sh ...

javascriptjquerycssloopsscrollto

Retrieving all rows from a table using Laravel API and Vue.js

<template> <div class="container"> <div class="row mt-5 mb-3"> <div class="col-md-10"> <h3>Gallery</h3> </div> <div class="col-md-2"> <button class="btn btn-success" ...

javascriptlaravelvue.js

Can anyone suggest a reliable method for comparing two dependencies trees generated by the `npm list` command?

Prior to launching the project, it is crucial to analyze the updated dependencies that could potentially affect other pages. Utilizing the npm list command can help generate a comprehensive tree of all dependencies. What is the most efficient way to comp ...

javascriptnode.jsnpmdependencies

What could be the reason why my JavaScript code for adding a class to hide an image is not functioning properly?

My HTML code looks like this: <div class="container-fluid instructions"> <img src="chick2.png"> <img class="img1" src="dice6.png"> <img class="img2" src="dice6.png" ...

javascriptcss

Reading Properties in VueJS with Firebase

<template> <div id="app"> <h1 id="title"gt;{{ quiz.title }}</h1> <div id="ques" v-for="(question, index) in quiz.questions" :key="question.text"> <div v-show="index = ...

javascripthtmlcssfirebasevue.js

Is it feasible to add to an ID using ngx-bootstrap's dropdown feature?

In the documentation for ngx dropdown, there is a feature called "append to body." I recently tried changing this to append to a table element instead and it worked successfully. Now, on another page, I have two tables displayed. If I were to assign each ...

cssangularngx-bootstrap

Ensure that the content remains at the center of the screen, but is dynamic and changes

I have a unique concept I want to experiment with, but I'm unsure of the best approach to take. My idea involves centering content on the screen and instead of having it scroll off and new content scroll in, I would like it to stay centered and smoot ...

javascripthtmlcss

Ways to access the props value within the lifecycle hooks of Vue JS

Is there a way to retrieve the value of props using lifecycle hooks such as mounted or updated, and then store that value in my v-model with additional text? I've been struggling to achieve this. I attempted using :value on the input element with bot ...

javascriptlaravelvue.js

Component in Angular with an empty variable in TypeScript

I'm encountering an issue on my web page where I have a loop calling a component multiple times. I successfully pass data to the component, but the problem arises when I try to display the value of an object in the component. In the component's H ...

angulartypescriptcomponents

Leveraging Angular environment configurations for workspace libraries

I've been experimenting with Angular's latest version (>6) and am delving into the concept of using workspaces. One interesting feature is the ability to generate a library project with a simple CLI command: ng generate library api In my de ...

angularangular-cliangular6angular-cli-v6

Why does NgWebDriver only work after the page is reloaded?

Currently, in my testing setup for an Angular app, I am utilizing selenium and NgWebDriver. However, I have noticed that when I use ngWebDriver, the testing process takes a significantly longer time. Strangely, when I manually refresh the page, all the t ...

javaangularselenium