※初心者です 不手際が多々あるかと思いますがよろしくお願いします。
前提・実現したいこと
monacaでonsenui,angularjsを用い友人同士でスマホでiosからもandroidからも閲覧できるラーメン情報を共有するアプリを作ろうとしています。
現状、onsenuiのaction-sheetを出し、選択肢を表示するところまでは到達したのですが、選択した値をボタンの横にラベル表示させたいのです。
発生している問題・エラーメッセージ
アクションシートボタンで選択した値がラベル表示されないです。
該当のソースコード
index.html
index.html
1<!DOCTYPE HTML> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 6 <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> 7 <script src="components/loader.js"></script> 8 <script src="lib/angular/angular.min.js"></script> 9 <script src="lib/onsenui/js/onsenui.min.js"></script> 10 <script src="lib/onsenui/js/angular-onsenui.min.js"></script> 11 <script src="lib/onsenui/js/app.js"></script> 12 <link rel="stylesheet" href="components/loader.css"> 13 <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> 14 <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> 15 <link rel="stylesheet" href="css/style.css"> 16 17 <script> 18 19ons.disableAutoStatusBarFill(); // (Monaca enables StatusBar plugin by default) 20 21 22 </script> 23</head> 24<body> 25 26<ons-navigator var="myNavigator" page="page1.html"> 27 28</body> 29</html>
page1.html
<ons-page> <ons-toolbar> <div class="center">Navigator</div> </ons-toolbar> <ons-page> <p style="text-align: center"> <ons-button onclick="app.showFromTemplate()">麺の種類</ons-button> </p> </ons-page> <template id="action-sheet.html"> <ons-action-sheet id="sheet" cancelable title="From template"> <ons-action-sheet-button onclick="app.hideFromTemplate()">ラーメン</ons-action-sheet-button> <ons-action-sheet-button onclick="app.hideFromTemplate()">つけ麺</ons-action-sheet-button> <ons-action-sheet-button onclick="app.hideFromTemplate()">まぜ麺</ons-action-sheet-button> <ons-action-sheet-button icon="md-close" onclick="app.hideFromTemplate()">Cancel</ons-action-sheet-button> </ons-action-sheet> </template> </ons-page>
###調べたこと
選択肢の要素にインデックスをつけるのがひとつの解決法なのかもですが、私にはangularにどう反映させていけばいいかわからないです。
よろしくお願いします。
あなたの回答
tips
プレビュー