monaca onsen ui ver2 で ng-repeat を使用したい。

###前提・実現したいこと
お世話になります。

monaca で ng-repeatを使用したく、
下記のページを参考にしてmonaca-onsen navigation にて
プログラムを組んでいるのですが
うまくいきません。

###発生している問題・エラーメッセージ

ons.bootstrap is not function と出力されます。

###該当のソースコード

javascript
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    <link rel="stylesheet" href="components/loader.css">
9    <link rel="stylesheet" href="css/style.css">
10    <script>
11        var app = ons.bootstrap("myApp", ["onsen"]);
12        app.controller("page1Controller", ["$scope", function($scope) {
13            $scope.data = "ここをタップ";
14            $scope.changeData = function() {
15                myNavi.pushPage("page2.html");
16            };
17            $scope.$on("selectData", function(e, value) {
18console.log(value);
19                $scope.data = value;
20            });
21        }]);
22        app.controller("page2Controller", ["$scope", "$rootScope", function($scope, $rootScope) {
23            $scope.table = [
24                { value: 1 },
25                { value: 10 },
26                { value: 1000 },
27                { value: 10000 },
28                { value: 100000 }
29            ];
30            $scope.selectData = function(value) {
31                $rootScope.$broadcast("selectData", value);
32                myNavi.popPage();
33            };
34        }]);
35    </script>
36</head>
37<body>
38    <ons-navigator var="myNavi">
39        <ons-page ng-controller="page1Controller">
40            <ons-toolbar>
41                <div class="center">Page 1</div>
42            </ons-toolbar>
43            <ons-list>
44                <ons-list-header>
45                    データ
46                </ons-list-header>
47                <ons-list-item modifier="chevron" ng-click="changeData()">
48                    {{data}}
49                </ons-list-item>
50            </ons-list>
51        </ons-page>
52    </ons-navigator>
53    <ons-template id="page2.html">
54        <ons-page ng-controller="page2Controller">
55            <ons-toolbar>
56                <div class="center">Page 2</div>
57            </ons-toolbar>
58            <ons-list>
59                <ons-list-item modifier="tappable" ng-repeat="item in table" ng-click="selectData(item.value)">
60                    {{item.value}}
61                </ons-list-item>
62            </ons-list>
63        </ons-page>
64    </ons-template>
65</body>
66</html>

###試したこと
ググりましたがよくわかりませんでした・・・

###補足情報(言語/FW/ツール等のバージョンなど)
monaca onsen ui ver.2

行動規範の内容に同意します

回答1件

ベストアンサー

<!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'">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.2.6/css/onsenui.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.2.6/css/onsen-css-components.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.2.6/js/onsenui.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.4.0/js/angular-onsenui.min.js"></script>
    
    <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>

で動きました。
で、

<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.4.0/js/angular-onsenui.min.js"></script>

がなければ同じエラーが出たので、まずはangular-onsenui.min.jsが組み込まれているか確認されてはいかがでしょうか。

投稿2017/06/19 15:00

rururu3

総合スコア5545

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

monaca onsen ui ver2 で ng-repeat を使用したい。

関連した質問