Bye Bye Moore

猫マンション建築の野望を胸に零細事業主として資本主義の荒波に漕ぎ出したアラサー男の技術メモ

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>

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

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