ion-option的ion 3自定义选择器
ion-option是Ionic框架中的一个组件，用于创建自定义选择器。它是ion-select组件的子组件，用于定义选择器中的选项。
ion-option的主要作用是提供多个选项供用户选择。每个ion-option元素都可以包含一个值和一个显示文本。当用户选择一个选项时，选择器会返回该选项的值。
ion-option可以根据不同的需求进行自定义配置，包括设置选项的值、文本、禁用状态、图标等。可以通过设置ion-option的属性来实现这些配置。
ion-option的优势在于它可以轻松地创建一个美观且易于使用的选择器，提供了丰富的配置选项，可以满足不同场景下的需求。
ion-option的应用场景包括但不限于：
- 表单中的下拉选择框：可以用ion-option创建一个下拉选择框，让用户从多个选项中选择一个值。
- 多级联动选择器：可以通过嵌套多个ion-option创建多级联动选择器，实现根据前一级选项的选择动态加载后一级选项。
- 筛选器：可以将ion-option用于创建筛选器，让用户根据不同的选项进行数据筛选。
腾讯云提供了一系列与Ionic框架相关的产品，可以帮助开发者快速构建和部署移动应用。其中，与ion-option相关的产品是腾讯云移动应用开发平台（Mobile Application Development Platform，MADP）。MADP提供了丰富的移动应用开发工具和服务，包括应用构建、测试、发布、运营等环节的解决方案。通过MADP，开发者可以轻松地使用ion-option等Ionic组件，快速构建出功能强大的移动应用。
更多关于腾讯云移动应用开发平台的信息，可以访问以下链接： 腾讯云移动应用开发平台
相关·内容
在离子3中，为了检查表单的有效性，我们使用了FormBuilder的"form.valid"属性，该属性如果有效则返回true，如果无效则返回false，
我的问题是，当我从javascript中设置值时，"form.valid"甚至设置在select控件的选项中没有给出(可用)的任何值，都会给真正的。
我希望如果select值与给定选项不同，则select控件无效。
这是工作，
密码说得更好，
这里是设计部分(page.html)，
<button ion-button color="app" (click)="setval_va
浏览 0提问于2018-02-15得票数 0
我使用的是离子，我试图编辑一个表单，其中这个选择选项有多个值。此代码未将选项设置为“选定”。怎么啦？
list_of_house是一个数组示例list_of_house =‘house3 1’，‘house3 2’，'house3；
<ion-label>House:</ion-label>
<ion-select ngModel={{list_of_house}} #house name="house" multiple="true">
浏览 1提问于2017-08-03得票数 0
回答已采纳
我正试图制作一份登记表，其中我有一个国家的下拉列表，这些国家的规模非常大。我想包括搜索选项在下拉列表的顶部，以提供方便的访问。有人能帮我解决这个问题吗？这是我的密码：
home.html
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<form [formGroup]="myForm">
&l
浏览 2提问于2016-10-19得票数 1
回答已采纳
2回答
单击按钮时，我想添加一个新行。
<button ion-button large full color="dark" (click)="onClickNewRow()">New Row</button>
这是我想要添加的那种行
<ion-row>
<ion-col col-12>
Compétences recherchées
<ion-list>
<ion-item>
<ion-label
浏览 0提问于2018-10-08得票数 0
回答已采纳
1回答
我在按钮标签里有个图标。我也有一个选择下拉，我想把它的箭头图标直接与心脏图标。我以为我可以用常规的css定位来完成这个任务，但是除非我完全从按钮标签中删除select图标，否则图标将不会以我需要的方式移动到标准css定位中。
<button class="toolbarButtons" ion-button >
<ion-select id="select">
<ion-option value="NY">New York&l
浏览 2提问于2017-06-03得票数 0
回答已采纳
我有一个离子选择与几个选项，我给了一个标题使用selectOptions，有没有办法定义一个css，以便我可以设置背景颜色的标题，按钮对齐，并添加一个图标的标题
<ion-select [selectOptions]="daysOptions" #selectDays="ngModel" required name="selectedDay" [(ngModel)]="selectDay" >
<ion-option *ngFor="let day of Days;" [val
浏览 2提问于2017-08-04得票数 6
4回答
Ionic 3-下拉选择
、、、、
我正在尝试在离子3中重新创建以下内容(请参阅GIF链接)。我不知道我在做什么。我已经尝试使用离子选择选项，但它没有给我想要的效果。有没有人能帮我一下？
下拉选择：
更多信息：
目前我在这里：
如你所见，非常遥远。我的代码是：
<ion-grid>
<ion-row>
<ion-col col-3>
<ion-item>
<ion-label stacked>Filter</ion-label>
<io
浏览 1提问于2017-07-24得票数 1
我正在使用ionic 2制作移动应用程序。当我在ion-select元素中使用selected属性时，它对一个页面有效，但当我将它用于另一个页面(组件)时，它就不起作用了。
我是Ionic-2的新手
我使用选定属性的代码如下所示：
<ion-item>
<ion-label>IO/WBS</ion-label>
<ion-select interface="popover">
<ion-option value="Department1" selected&g
浏览 0提问于2017-06-25得票数 0
1回答
我要下拉式选择
但它在离子3中用单选按钮显示。
我怎样才能放下选择(与文本)。
参考文献：
碘v3
<ion-list>
<ion-item>
<ion-label>Gaming</ion-label>
<ion-select [(ngModel)]="gaming" interface="popover" >
<ion-option value="nes">NES</ion-option>
<ion-o
浏览 4提问于2019-09-17得票数 0
回答已采纳
我正在从一个api中获取一个JSON文件，
正如你所看到的，在一个叫做"rates“的对象中有一个对象*ngFor只能遍历数组。我正在寻找一些我可以得到“键”和“值”的东西，比如
for(var var in obj)
例如获取"AUD:0.41852“的访问权限
{
"base":"BRL",s
"date":"2016-10-27",
"rates":{
"AUD":0.41852,
"BGN":0.57085,
"CAD":0.426
浏览 0提问于2016-10-28得票数 7
回答已采纳
1回答
我使用离子选择=>离子选项作为我的离子3项目的输入。它提供了一个关于选择的警告，但是警报体的字体大小真的很小，我尝试了所有的sass选项来增加它的字体大小都是徒劳的。我试过使用.alert-md，.alert-tappable。有什么办法可以增加这个字体吗。
.scss
.ios, .md {
page-add-stock {
/*.alert-md .alert-checkbox-label{
}*/
.alert-radio-label {
font-size: 3rem;
}
}
}
.html
<ion-s
浏览 4提问于2017-07-27得票数 4
回答已采纳
我想在选中两个选项后禁用所有选项。我已经尝试过(ionChange)，但在单击select模型的"Ok“按钮后触发了此事件。有没有在"ionChange“之前执行的其他事件？
<ion-item>
<ion-label>Values</ion-label>
<ion-select formControlName="Values" multiple="true">
<ion-option value="1">1 value
浏览 1提问于2017-11-24得票数 8
2回答
我用的是ion 2，当ion-select放在ion-card里面时，ion-select不会显示出来。下面是我的代码：
<ion-content>
<ion-list>
<ion-item>
<ion-card>
<ion-label>Quantity</ion-label>
<ion-select>
<ion-option value="nes">0</ion-option>
浏览 12提问于2017-06-29得票数 2
回答已采纳
是否可以在离子选择内计算离子选项？
<ion-select>
<ion-option></ion-option>
<ion-option></ion-option>
<ion-option></ion-option>
</ion-select>
console.log(something)和我会得到3？
谢谢。
浏览 1提问于2018-03-20得票数 2
回答已采纳
1回答
使用Ionic版本3。
html示例：
<ion-list>
<ion-item>
<ion-label>Gaming</ion-label>
<ion-select [(ngModel)]="gaming">
<ion-option value="nes" class="tored" style="color:red"><span>NES</span> </ion-option&g
浏览 2提问于2020-03-19得票数 0
我希望当用户从ionic3中的离子选择中选择一个选项时，打开另一个组件页面。有没有人能帮我做点什么？提前谢谢。下面是我的离子选择代码..
<ion-content>
<ion-list>
<ion-item>
<ion-label>ENGINEERING & TECHNOLOGY</ion-label>
<ion-select [(ngModel)]="engineering">
<
浏览 57提问于2018-06-02得票数 0
回答已采纳
我有一个表单，只有当第一个选项被选中时，我才想显示这个按钮。我使用的是角度模板驱动的方法。
<ion-item>
<ion-label>Address:</ion-label>
<ion-select ngModel name="estate">
<ion-option [value]='1'>Estate1</ion-option>
<ion-option
浏览 1提问于2017-06-19得票数 0
回答已采纳
如何使用Angular / Ionic 2在构造函数/函数中获得选中的选项？
<ion-item>
<ion-label>Quantity</ion-label>
<ion-select [(ngModel)]="qty">
<ion-option value="1" selected="true">1</ion-option>
<ion-option value="2">2</ion-opti
浏览 0提问于2017-07-06得票数 0
回答已采纳
1回答
我在ionic2中使用ionic2。下面是我的代码：
<ion-item>
<ion-label>System Size:</ion-label>
<ion-select [(ngModel)]="quoteDetailsUpdate.system_size" name="system">
<ion-option value="1.5"> 1.5K </ion-option>
浏览 2提问于2017-05-17得票数 0
回答已采纳
基本上，我正在尝试做一个注册表，在其中我有一些下拉列表。我想在它上应用"(change)“事件，它将触发一个函数，每当值发生变化时，或者我们可以说，从该下拉列表中选择值，并在此基础上动态分配下一个字段，但此事件在下拉列表中不起作用，而它与文本字段一起工作得很好。有人能帮我解决这个问题吗？
示例代码：
home.html -->
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
&l
浏览 3提问于2016-10-18得票数 6
回答已采纳
1回答
我想得到outer text of a select box当它是selected
例如，： <ion-option value="1">Agriculture</ion-option> // output: Agriculture
这里是演示：
下面是我的html
<ion-item>
<ion-label>Choose Industry Type</ion-label>
<ion-select [(ngModel)]="getSelectedValue&#
浏览 5提问于2017-10-14得票数 0
1回答
我正在使用IONIC3。我有一个离子选择和多个离子选择。现在，无论我选择什么，它都以逗号分隔值显示。但是我想以这样的格式显示，如果选择了2个，那么它应该显示'2 /6选定‘
<ion-item>
<ion-label>Toppings</ion-label>
<ion-select [(ngModel)]="toppings" multiple="true">
<ion-option>Bacon</ion-option>
<ion-o
浏览 1提问于2019-07-25得票数 1
在我的离子3应用程序中，我想添加一个不同国家的动态选择选项.我的国家目标是：
{AF: "Afghanistan", AX: "Aland Islands", AL: "Albania", DZ: "Algeria"}
我想使用这个对象，比如：
<ion-select [(ngModel)]="country" interface="action-sheet">
<ion-option value='AF'>Afghanistan</ion-o
浏览 1提问于2018-04-06得票数 0
回答已采纳
可以将图标添加到ion-select中的ion-option吗？就像这样
<ion-select name="type">
<ion-option value="bar"><ion-icon name="stats"></ion-icon>Bar</ion-option>
<ion-option value="pie"><ion-icon name="pie"></ion-icon>Pi
浏览 2提问于2017-05-23得票数 9
1回答
我有安全问题数组，我想在下拉列表中显示这些问题。它不应该对另一个下拉列表重复相同的问题。如何实现使用angular2 2/离子2
{
"content": [
{
"secQues": "what is your pet name",
"secSeq": 1,
"status": "A"
},
{
"secQues": "what is your nick name",
浏览 3提问于2016-09-26得票数 0
回答已采纳
在下拉列表中的公司名称后需要一个新行。 我已经尝试了所有的方法，也插入了<p> & <br>标签。 <ion-item>
<ion-label>select</ion-label>
<ion-select okText="Okay" cancelText="Dismiss">
<ion-option value="1"> company1 address1</ion-option>
<ion-option
浏览 13提问于2019-05-23得票数 1
1回答
我遵循了本教程： 检查最后的解决方案。
我希望在单击图标(放置在标题上)时显示“选择选项”菜单，如下所示：
但是我得到了错误:找不到名字‘选择’，因为这个构建失败了。
代码
<ion-buttons end>
<button ion-button icon-only (click)="someFunc()" >
<ion-icon name="icon-name"></ion-icon>
</button>
</ion-buttons>
<ion-select #
浏览 3提问于2017-10-28得票数 0
回答已采纳
我尝试传递params变量item.audutModel in (ngModel)和catch值(ngModel) by (ngModelChange)="AddAdults( item.audutModel )“，但是in (ngModelChange)="AddAdults(item.audutModel)”它理解item.audutModel是名称模型而不是参数。对不起我的英语。如果你听不懂，请发表评论。
我的代码: html文件
<tr *ngFor="let item of Room">
浏览 0提问于2017-05-10得票数 0
回答已采纳
我想要一个ion-select和ion-input同一行，宽度如下：
ion-select 10% width
ion-input 10% width
我为此编写了以下代码()：
<div style="display: flex">
<ion-item style="width:10%">
<ion-label>+2</ion-label>
<ion-select>
<ion-option value="1"
浏览 1提问于2018-12-18得票数 0
我尝试在[(ngModel)]中传递params变量[(ngModel)]，并通过(ngModelChange)="AddAdults(item.audutModel)"传递[(ngModel)]的捕获值，但是在(ngModelChange)="AddAdults(item.audutModel)"中，它理解item.audutModel是名称模型，而不是params。对不起我的英语。如果你听不懂，请发表评论。
我的代码：
<ion-select [(ngModel)]=item.audutModel (ngModelChange)="AddAdu
浏览 3提问于2017-05-10得票数 1
3回答
如何使用不同的按钮弹出离子选择？
<ion-select [(ngModel)]="choices" multiple="true">
<ion-option>Appliances</ion-option>
<ion-option>Automobile</ion-option>
<ion-option>Cellphones</ion-option>
<ion-option>Clothing</ion
浏览 3提问于2018-02-07得票数 15
回答已采纳
2回答
我试图从离子中的select元素中获取值，下面是代码：
<ion-content padding style="direction:rtl;">
<ion-list>
<ion-item>
<ion-label>בחר מטבע:</ion-label>
<ion-select #selectCurrencyInput okText="אשר" cancelText="בטל" ionChange="alert(this.value)&#
浏览 0提问于2016-10-27得票数 0
回答已采纳
我有3个输入域: marca (品牌)，modelo (型号)和combustible (引擎类型)。我需要modelo和可燃禁用最初，但设置为启用时，一个品牌(马卡)被选中。
<ion-item>
<ion-label stacked>Marca</ion-label>
<ion-select [(ngModel)]="marca" (ionChange)="getModelos($event, marca)" cancelText="Cancelar" placeholder=&#
浏览 2提问于2016-10-08得票数 0
这是电影列表的代码。
用户可以使用图片将电影添加到数据库中。用户可以编辑或删除电影。上传和检索没有问题。
当我尝试编辑或删除电影时，它会显示错误。
请帮帮忙。火焰碱，离子，科多瓦和角使用。当我试图编辑或删除一个请帮助解决问题。如果有人也能解释他们的答案，也会很高兴。谢谢!
modals.ts和home.ts拥有大部分代码。所以我认为错误就在那里。
modals.ts
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } fr
浏览 2提问于2017-04-16得票数 0
1回答
我正在创建一个表单使用超文本标记语言/CSS& JavaScript和我添加了一个“添加”按钮，将显示该表单的副本下的原始一个。但是，表单内部的ion-select元素有一个问题。在原始表单中，当单击它时，它将显示我预定义的所有选项。但是，在复制表单中，单击时根本不会显示任何内容。表单中也存在的输入字段不会发生这种情况。 下面是我的代码： import { Component } from '@angular/core';
const p = document.createElement("p");
p.textContent = "he
浏览 25提问于2020-09-03得票数 0
2回答
我被困在这里
当我单击列表时，什么都不会发生，控制台也不会显示任何内容。我使用搜索过滤器，类型记录到列表过滤器。我不擅长离子，尤其是角质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
浏览 1提问于2018-11-23得票数 0
回答已采纳
1回答
如何隐藏文本离子选项ionic2
、、、、
如何隐藏文本离子选项。我想隐藏或删除一些文本以显示在ion-option中。(不是删除数据)，因为我想为用户保存选择它
<ion-select [(ngModel)]="refine" (ionChange)="optionsFn(item, i);" >
<ion-option [value]="item" *ngFor="let item of totalfilter ;let i = index" >
{{item["@NAME"]}}
浏览 2提问于2017-03-15得票数 1
回答已采纳
在尝试实现特定的select设计之后(请参阅另一个线程上的帮助：)，我决定尝试并使用ionic提供的离子选择。
这就是我目前所拥有的：
有人知道如何删除：-每个选项下的线条-单选图标
以及如何在select下拉列表中添加子标题，其中"My Filters“为子标题：
我尝试了no -line，但没有成功，并尝试更改弹出窗口的模式，以删除无线图标，但也没有成功。任何帮助都是最好的。
到目前为止我的代码如下：
<ion-grid *ngIf="toggled">
<ion-row>
<ion-col col-4>
浏览 18提问于2017-07-25得票数 2
1回答
代码片段。
<ion-item>
<ion-label> Day</ion-label>
<ion-select interface="popover" [(ngModel)]="day" >
<ion-option value="Monday">Monday</ion-option>
<ion-option value="Tuesday">Tuesday</ion-option>
浏览 1提问于2018-03-17得票数 0
1回答
因此，我一直在尝试设计当我按下它时弹出的"“窗口的样式。所以我的HTML代码是：
page-about {
}
<!--HTML about.html -->
<ion-item>
<ion-label>Toppings</ion-label>
<ion-select [(ngModel)]="toppings">
<ion-option>Bacon</ion-option>
<ion-option>Black Olives</io
浏览 6提问于2017-07-11得票数 0
2回答
大家好，我是ionic的新手，我有一个问题，如何使用*ngIf来显示输入字段
这是我的.html
<div *ngIf="project_group_id=1">
<ion-card>
<ion-item no-lines>
<ion-label color="primary">Phase No:</ion-label>
<ion-select formControlName="phase_id" placeholder="Select ph
浏览 0提问于2020-03-04得票数 2
我正在开发一个移动应用程序，我有一个场景，我在ion-select中使用了ion-select，它工作得很好。但是，我希望取消OK/CANCEL按钮，这样我就不必单击其中的任何一个按钮来选择我的选项。
我想要的是能够点击一个选项，它会自动被选中，而不必单击OK。
form.html
<ion-card class="card-space">
<ion-item>
<ion-label stacked>Title</ion-label>
<ion-selec
浏览 5提问于2017-10-22得票数 1
回答已采纳
我使用的是Ionic 2 Select组件，正如示例所示(我实际上复制/粘贴了"Gaming“选择)，当弹出窗口显示选项时，选项文本总是丢失。它将显示每个项目的单选按钮，但只显示文本的空格。我检查了HTML以确保它没有被CSS隐藏，并且选项文本不在HTML中。
我已经在浏览器和实际的Android手机上尝试过了，都得到了同样的结果。我做错了什么？
这是我的HTML：
<ion-label>Gaming</ion-label>
<ion-select [(ngModel)]="gaming">
<ion-opti
浏览 3提问于2017-04-24得票数 1
1回答
在我的ionic 2应用程序中，我将一些信息推送到Firebase的实时数据库中，在另一个页面中，我想根据搜索检索这些数据。
下面是我的Firebase引用的样子：
---Bloods
-----id
这是我的search.html，我希望列出选定的数据(例如A rh+，female)，而不是显示加载屏幕
<ion-header>
<ion-navbar color="secondary">
<ion-title>
Search
</ion-title>
</ion-
浏览 0提问于2017-05-16得票数 0
我在ionic 2中有2个select，并且我能够根据在first中选择的值动态填充第二个。但我不能在填充后设置选中的默认选项。我试过了：
<ion-item>
<ion-label>City</ion-label>
<ion-select (ionChange)="setCity($event)">
<ion-option selected >City1</ion-option>
<ion-option >City2</ion-option>
浏览 0提问于2017-08-30得票数 0
2回答
我有下面的页面网格结构，我想去掉周围的填充，这样它就不那么大了。有没有一个不错的方法来做到这一点，不会破坏所有的离子风格的盒子？
结构如下：
<ion-content>
<ion-row baseline>
<ion-col width-90>
<ion-item>
<ion-label stacked>Email</ion-label>
<ion-input type="text"></ion-input>
<
浏览 7提问于2016-03-17得票数 3
回答已采纳
1回答
将多个过滤器应用于列表
、、、
我收到的数据如下所示，我正在列表中填充这些数据：
tasks = [
{
title: "One",
prop1: "Lorem",
prop2: "Lorem",
prop3: "Lorem"
},
{
title: "Two",
prop1: "Lorem",
prop2: &
浏览 1提问于2018-04-24得票数 1
回答已采纳
我正在尝试从select倍数ionic2中获取值。
我的html是
<ion-select name="days" [(ngModel)]="appointment.days" multiple="true">
<ion-option value="mon" selected="true">Monday</ion-option>
<ion-option value="tue">Tuedsay</ion-option>
浏览 2提问于2017-04-23得票数 0
回答已采纳
以以下html为例
<form [formGroup]="detailsForm">
<ion-list>
<ion-item>
<ion-label>Gaming</ion-label>
<ion-select formControlName="gaming">
<ion-option value="nes">NES</ion-option>
<ion-option value="n
浏览 1提问于2017-04-28得票数 2
回答已采纳
我有一个包含用户的列表，并且我有一个项目，我希望它将我重定向到一个模式页面。我的问题是，一旦我的页面可用，我就会得到一个无限弹出的模式，而不是继续我的离子选择，然后选择项目，这样我就可以获得弹出窗口。
html
<ion-select interface="popover" (ngModelChange)="onChange($event)">
<ion-option>Bacon</ion-option>
<ion-option [value]="openConfig()"></i
浏览 0提问于2018-07-04得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
