

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

index.html

[code]

    <!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>
    
[/code]

page1.html

[code]

    <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>
    
[/code]

page2.html

[code]

    <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>
    
[/code]


CC BY-SA 3.0
2016-01-28T13:44:57.697
21453
2019-09-17T11:01:35.357
13526
question
onsen-ui angularjs
AngularJSでデータ入力して、別のページにTodoリストのようにリスト追加する機能を作りたい


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

index.html

[code]

    <!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>
    
[/code]

page1.html

[code]

    <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>
    
[/code]

page2.html

[code]

    <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>
    
[/code]


CC BY-SA 3.0
2016-01-29T05:28:34.753
21461
2016-01-29T05:28:34.753
13314
21453
answer