IsaoWatanabe score 13
2017/06/19 20:25 投稿
| monaca onsen ui ver2 で ng-repeat を使用したい。 |
| ###前提・実現したいこと |
| お世話になります。 |
| monaca で ng-repeatを使用したく、 |
| 下記のページを参考にしてmonaca-onsen navigation にて |
| プログラムを組んでいるのですが |
| うまくいきません。 |
| [参考ページ](http://hatopp.wpblog.jp/archives/670) |
| ###発生している問題・エラーメッセージ |
| ``` |
| ons.bootstrap is not function と出力されます。 |
| ``` |
| ###該当のソースコード |
| ###該当のソースコード |
| ```javascript |
| <!DOCTYPE HTML> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> |
| <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> |
| <script src="components/loader.js"></script> |
| <link rel="stylesheet" href="components/loader.css"> |
| <link rel="stylesheet" href="css/style.css"> |
| <script> |
| var app = ons.bootstrap("myApp", ["onsen"]); |
| app.controller("page1Controller", ["$scope", function($scope) { |
| $scope.data = "ここをタップ"; |
| $scope.changeData = function() { |
| myNavi.pushPage("page2.html"); |
| }; |
| $scope.$on("selectData", function(e, value) { |
| console.log(value); |
| $scope.data = value; |
| }); |
| }]); |
| app.controller("page2Controller", ["$scope", "$rootScope", function($scope, $rootScope) { |
| $scope.table = [ |
| { value: 1 }, |
| { value: 10 }, |
| { value: 1000 }, |
| { value: 10000 }, |
| { value: 100000 } |
| ]; |
| $scope.selectData = function(value) { |
| $rootScope.$broadcast("selectData", value); |
| myNavi.popPage(); |
| }; |
| }]); |
| </script> |
| </head> |
| <body> |
| <ons-navigator var="myNavi"> |
| <ons-page ng-controller="page1Controller"> |
| <ons-toolbar> |
| <div class="center">Page 1</div> |
| </ons-toolbar> |
| <ons-list> |
| <ons-list-header> |
| データ |
| </ons-list-header> |
| <ons-list-item modifier="chevron" ng-click="changeData()"> |
| {{data}} |
| </ons-list-item> |
| </ons-list> |
| </ons-page> |
| </ons-navigator> |
| <ons-template id="page2.html"> |
| <ons-page ng-controller="page2Controller"> |
| <ons-toolbar> |
| <div class="center">Page 2</div> |
| </ons-toolbar> |
| <ons-list> |
| <ons-list-item modifier="tappable" ng-repeat="item in table" ng-click="selectData(item.value)"> |
| {{item.value}} |
| </ons-list-item> |
| </ons-list> |
| </ons-page> |
| </ons-template> |
| </body> |
| </html> |
| ``` |
| ###試したこと |
| ググりましたがよくわかりませんでした・・・ |
| ###補足情報(言語/FW/ツール等のバージョンなど) |
| monaca onsen ui ver.2 |
