質問編集履歴

1 ソースコードを一部変更しました。

IsaoWatanabe

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
  • JavaScript

    37873 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • AngularJS

    648 questions

    AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

  • Monaca

    1558 questions

    「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る