0

サンプルのOnsen UI TabbarにPage1.htmlは入力フォーム、Page2.htmlは入力した結果を出力する形式になっております。AngularJSでPage1上でテキスト入力させ、Page2にPage1で書いたテキストを表示させることはできましたが、Page1でテキスト入力し送信ボタンを押して、Page2にonsenUIのons-lazy-repeatを使ってテキストリスト追加していく機能を作ろうとしましたがうまく反映できませんでした。AngularJSを触れたのはつい最近なのでわかりませんがご教授願いします。

index.html

<!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 *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<script src="components/script.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script>
    var app = ons.bootstrap();

    app.factory("SharedStateService", function () {
        return {
            text: 'SharedStateService'
        };
    });

    app.controller("ShareControllerA", function ($scope, SharedStateService) {
        $scope.data = SharedStateService;

    });

    app.controller("ShareControllerB", function ($scope, SharedStateService) {
        $scope.data = SharedStateService;
    });

    app.controller("ShareControllerC", function ($scope, SharedStateService) {
        $scope.data = SharedStateService;
    });
</script>
</head>
<body>
<ons-navigator var="myNavigator" page="page1.html">
</ons-navigator>

<ons-tabbar var="tabbar">
        <ons-tabbar-item
        icon="home"
        label="Home"
        page="page1.html"
        active="true"></ons-tabbar-item>
        <ons-tabbar-item
        icon="comment"
        label="Comments"
        page="page2.html"></ons-tabbar-item>
        <ons-tabbar-item
        icon="gear"
        label="Settings"
        page="page3.html"></ons-tabbar-item>
</ons-tabbar>

</body>
</html>

page1.html

<ons-page>
        <ons-toolbar>
            <div class="center">Navigator</div>
        </ons-toolbar>

        <h4>Shared State Service</h4>
        <div ng-controller="ShareControllerA">
            <ons-list-header>This is ShareControllerA</ons-list-header>
            <ons-list-item><input type="text" class="text-input" ng-model="data.text" style="80%"></ons-list-item>

        </div>


        <div style="text-align: center">
            <br>
            <ons-button ng-click="myNavigator.pushPage('page2.html')">
                Add List
            </ons-button>
        </div>
</ons-page>

page2.html

<ons-page>
<ons-toolbar>
    <div class="left"><ons-back-button>Back</ons-back-button></div>
        <div class="center">Page 2</div>
    </ons-toolbar>

    <div ng-controller="ShareControllerC">
        <h5>This is ShareControllerC</h5>
    <ul class="list">
    <li class="list__item list__item--tappable">
    <label class="radio-button">
    <input type="radio" name="r" checked="checked">
        <div class="radio-button__checkmark"></div>
            {{data.text}}
        </label><br>
    </li>  
    </ul>

    </div>
</ons-page>

1 件の回答 1

1
  • 入力されたテキストを配列として保持しておくために、factory内に変数を用意しました。
  • ShareControllerAでadd()メソッドを定義して、ボタンが押されたタイミングでその配列にテキストを追加するようにしました。
  • ons-lazy-repeatを使うためにShareControllerCでデリゲートオブジェクトを定義しました。
  • ナビゲーションはとりあえずons-tabbarを使いました。

index.html

<!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 *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<script src="components/script.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script>
    var app = ons.bootstrap();

    app.factory("SharedStateService", function () {
        var array = [];
        return {
            items: array,
            append: function(s){
                array.push(s);
            }
        }
    });

    app.controller("ShareControllerA", function ($scope, SharedStateService) {
        $scope.add = function(){
            SharedStateService.append($scope.data.text);
            tabbar.setActiveTab(1);
        }
    });

    app.controller("ShareControllerC", function ($scope, SharedStateService) {
        // ons-lazy-repeatのためのデリゲート
        // http://ja.onsen.io/guide/overview.html#UsingLazyRepeat
        $scope.MyDelegate = {
          countItems: function() {
            // Return number of items.
            return SharedStateService.items.length;
          },

          calculateItemHeight: function(index) {
            // Return the height of an item in pixels.
            return 45;
          },

          configureItemScope: function(index, itemScope) {
            // Initialize scope
            itemScope.item = SharedStateService.items[index];
          },

          destroyItemScope: function(index, itemScope) {
            // Optional method that is called when an item is unloaded.
            console.log('Destroyed item with index: ' + index);
          }
        };
    });
</script>
</head>
<body>
<ons-tabbar var="tabbar">
        <ons-tabbar-item
        icon="home"
        label="Home"
        page="page1.html"
        active="true"></ons-tabbar-item>
        <ons-tabbar-item
        icon="comment"
        label="Comments"
        page="page2.html"></ons-tabbar-item>
        <ons-tabbar-item
        icon="gear"
        label="Settings"
        page="page3.html"></ons-tabbar-item>
</ons-tabbar>

</body>
</html>

page1.html

<ons-page>
        <ons-toolbar>
            <div class="center">Navigator</div>
        </ons-toolbar>

        <h4>Shared State Service</h4>
        <div ng-controller="ShareControllerA">
            <ons-list-header>This is ShareControllerA</ons-list-header>
            <ons-list-item><input type="text" class="text-input" ng-model="data.text" style="80%"></ons-list-item>

            <div style="text-align: center">
                <br>
                <ons-button ng-click="add()">
                    Add List
                </ons-button>
            </div>
        </div>
</ons-page>

page2.html

<ons-page>
<ons-toolbar>
    <div class="left"><ons-back-button>Back</ons-back-button></div>
        <div class="center">Page 2</div>
    </ons-toolbar>

    <div ng-controller="ShareControllerC">
        <h5>This is ShareControllerC</h5>
    <ul class="list" ons-lazy-repeat="MyDelegate">
    <li class="list__item list__item--tappable">
    <label class="radio-button">
    <input type="radio" name="r" checked="checked">
        <div class="radio-button__checkmark"></div>
            {{item}}
        </label><br>
    </li>  
    </ul>

    </div>
</ons-page>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。