ionicでポップアップ選択画面を実現するionic-modal-select

ionic-modal-selectはionicでポップアップ選択画面を実装できるプラグインです。

動作例を見たい方はこちら。
codepen.io

実際のところ

モーダルから選択すると、その内容でボタンの文字が変わる例を考えます。

環境導入

$ bower install ionic-modal-select

index.htmlに以下を追記。

<script src="lib/ionic-modal-select/ionic-modal-select.js"></script>

制御側のロジックを入れます。
ウチの場合はcontrollerです。

var appControllers = angular.module('starter.controllers', [ ... , ... , 'ionic-modal-select']);

appControllers.controller('HogeCtrl', function ($scope, ... , ionic-modal-select) {
    //...

    //モーダル用
    $scope.someSetModel = "GOGO";
    $scope.selectableNames =  [
	{ name : "Mauro", role : "black hat"}, 
	{ name : "Silvia", role : "pineye"},
	{ name : "Merlino", role : "little canaglia"},
    ];
}

ターゲットのページにポップアップ用のボタンを入れときます。

	    <ion-item>
		<button class="button button-assertive" modal-select="" ng-model="someSetModel" options="selectableNames" option-property="name">
		    {{ someSetModel || &apos;Select it&apos;}}
		    <div class="option">
			<h2>{{option.name}}</h2>
			<p>{{option.role}}</p>
		    </div>
		</button>
	    </ion-item>

プロジェクトは募金式です

募金式なので、プロジェクトが成功したり宝くじが当たったりしたらお金を渡しましょう。

参考もと

Ionic Modal Select - Ionic Marketplace
Ionic modal select demo