离子型如何显示的选项按钮点击下拉 [英] ionic how to display a dropdown of choices on button click

问题描述

我刚开始用离子框架，试图重做现有的引导/角应用到移动作为一个混合的应用程序。

I am just starting with ionic framework, trying to redo an existing bootstrap / angular application to mobile as a hybrid app.

是否有一个惯用的方式做一个下拉菜单中的离子？我已搜查离子网站/论坛，也google搜索，但没有运气。如引导单个按钮下拉。我与JavaScript，但HTML OK / CSS不是我的那杯茶。

Is there an idiomatic way to do a dropdown menu in ionic? I have searched the ionic website/forums and also googled but no luck. Like bootstrap single button dropdown. I am OK with JavaScript but HTML/CSS is not my cup of tea.

威尔AP preciate你的帮助。

Will appreciate your help.

- 编辑

由于TechMa9iac。我试图按照该行。

Thanks TechMa9iac. I am trying to follow that line.

我试图让采用了棱角分明的2级下拉菜单？我有我的模拟像数据中的DOC ngSelect

I am trying to make a 2-level dropdown using angular? I have modeled my data like in the ngSelect doc.

$scope.currSel = null;
$scope.metadata = [
    { proc: "Proc-1", board: "Alloc" },
    { proc: "Proc-1", board: "Manager" },
    { proc: "Proc-1", board: "Ops" },
    { proc: "Proc-2", board: "Alloc" },
    { proc: "Proc-2", board: "Manager" },
    { proc: "Proc-3", board: "Alloc" },
    { proc: "Proc-3", board: "Manager" }
];

HTML

<span>{{item.proc}}
<select ng-model="currSel"
        ng-options="item.board group by item.proc 
                        for item in metadata">
</select>

我单独显示 PROC 值在HTML因为选择文本区域只能说明板值（标签选择）。

I show the proc value separately in html because the select text area shows only board value (the label in select).

推荐答案

当NG-模型在NG选项是一个对象，它必须是一个对象引用数组值/字典元素之一。它不能是一个 angular.copy 。

when the ng-model in an ng-options is an object, it must be an object reference to one of the value array / dict elements. It cannot be an angular.copy.

plunker

这篇关于离子型如何显示的选项按钮点击下拉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！