CODEWITHSUNDEEP
angularjsionic-framework
Dinesh
Dinesh

Reputation: 4559

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.

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.

Will appreciate your help.

--EDIT

Thanks TechMa9iac. I am trying to follow that line.

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>

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

Upvotes: 0

Views: 16914

Answers (1)

Dinesh
Dinesh

Reputation: 4559

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.

Updated plunker

Upvotes: 1

Related Questions