

ons-carousel-itemコンポーネントをons-
carouselコンポーネントにjsで追加した場合refresh()メソッドを読んでレイアウトを更新する必要があります。

とonsenuiのガイドに記載されているのですが、具体的にどのようにjsに組み込めば良いのかわかりません。

お分かりになる方ご教示ください。


CC BY-SA 3.0
2015-09-11T15:28:18.560
16529
2015-09-11T17:36:07.400
11129
question
onsen-ui
<ons-carousel-item>コンポーネントを追加した場合refresh()メソッドの使い方


[Let’s Build a Weather App using AngularJS and Onsen
UI!](http://monaca.mobi/en/blog/weather-app/)

を参考に、実例のサンプルを改造してみました。  
Addボタンをタップすると、ons-carousel-itemがGRAYから順に追加されます。  
この場合、ng-repeatで配列分を回していますが、配列に追加しただけではons-carousel-
itemに反映されないため、refresh()を実行してons-carousel-itemを更新します。  
setImmediate()は、待機中のタスクがない状態でコールバックする関数で、これを使わないとうまく画面に反映されませんでした。

[code]

    <!DOCTYPE HTML>
    <html la="ja">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <script src="components/loader.js"></script>
        <link rel="stylesheet" href="components/loader.css">
        <script>
    var app = ons.bootstrap("myApp", ["onsen"]);
    app.controller("page1Controller", ["$scope", function($scope) {
        var colorTable = [
            {
                style:  "background-color: gray;",
                name:   "GRAY"
            },
            {
                style:  "background-color: #085078;",
                name:   "BLUE"
            },
            {
                style:  "background-color: #373B44;",
                name:   "DARK"
            },
            {
                style:  "background-color: #D38312;",
                name:   "ORANGE"
            },
            {
                style:  "background-color: red;",
                name:   "RED"
            },
        ];
        ons.ready(function() {
            $scope.colorTable = [];
        });
        $scope.addColor = function() {
            if ($scope.colorTable.length < colorTable.length) {
                $scope.colorTable.push(colorTable[$scope.colorTable.length]);
                setImmediate(function() {
                    myCarousel.refresh();
                    if ($scope.colorTable.length > 1) { 
                        myCarousel.setActiveCarouselItemIndex($scope.colorTable.length);
                    }
                });
            }
        };
    }]);
        </script>
        <style>
    ons-carousel-item {
        display: table;
        text-align: center;
    }
    .item-label {
        display: table-cell;
        vertical-align: middle;
        color: white;
        line-height: 1;
        font-size: 48px;
        font-weight: bold;
    }
    .cover-label {
        text-align: center;
        position: absolute;
        left: 0px;
        width: 100%;
        bottom: 10px;
        color: white;
    }
        </style>
    </head>
    <body>
        <ons-navigator var="myNavigator">
            <ons-page ng-controller="page1Controller">
                <ons-toolbar>
                      <div class="center">Carousel</div>
                      <div class="right"><ons-toolbar-button ng-click="addColor()">Add</ons-toolbar-button></div>
                </ons-toolbar>
                <ons-carousel swipeable overscrollable auto-scroll fullscreen var="myCarousel">
                    <ons-carousel-item style="{{color.style}}" ng-repeat="color in colorTable">
                        <div class="item-label">{{color.name}}</div>
                    </ons-carousel-item>
                    <ons-carousel-cover><div class="cover-label">Swipe left or right</div></ons-carousel-cover>
                </ons-carousel>
            </ons-page>
        </ons-navigator> 
    </body>
    </html>
    
[/code]


CC BY-SA 3.0
2015-09-11T17:16:32.127
16533
2015-09-11T17:36:07.400
2015-09-11T17:36:07.400
9566
9566
16529
answer