22607


お世話になります。開発環境Monacaです。Monaca公式ガイドブックサンプル「バーコードスキャナー  
アプリ（<https://ja.monaca.io/book/zip/10-2.zip>）」を編集しています。こちらのアプリの履歴画面に、左スワイプで各アイテムごとに削除する機能を実装しました。しかし試してみたところ、下記のような問題が発生しました。

＜問題の詳細＞  
A、B、Cの3つのアイテムがある場合、Bを左スワイプし削除すると、同時にCも左スワイプされた状態（削除ボタンが見えたまま）で表示されてしまいます。

＜目標＞  
Bが削除されても、AとCは普通の状態（削除ボタンが見えない）で表示したいです。

＜試してみたこと＞  
・ng-repeatのtrack by $indexを削除  
→上記の問題は発生しませんでした。しかしtrack by $indexは必要な機能のため、こちらは削除せずに解決したいです。

・削除ボタンの処理内で、ons-carousel-itemのindexをsetActiveCarouselItemIndexで指定する  
→画面上変化なし

アドバイスを頂ければ幸いです。

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">
                    <script src="components/loader.js"></script>
                    <link rel="stylesheet" href="components/loader.css">
                    <link rel="stylesheet" href="css/style.css">
                    <script>
                        var module = ons.bootstrap();
                        ons.disableAutoStatusBarFill();  // (Monaca enables StatusBar plugin by default)
                    </script>
                    <script src="app.js"></script>
                </head>
                <body ng-controller="AppController">
    
                    <ons-tabbar>
                        <ons-tab page="scanner.html" active="true" icon="fa-barcode" label="スキャナ" no-reload></ons-tab>
                        <ons-tab page="history.html" icon="fa-list" label="履歴" no-reload></ons-tab>
                    </ons-tabbar>
    
                    <ons-template id="scanner.html">
                        <ons-navigator var="navi">
                            <ons-page>
                                <ons-toolbar>
                                    <div class="center">スキャン開始</div>
                                </ons-toolbar>
                                <div class="scanner-wrapper">
                                    <p class="scanner-label">商品のバーコードをスキャンして、その商品の詳細情報を見てみましょう</p>
                                    <div class="scanner-eye-catch">
                                        <ons-icon icon="fa-barcode" size="160px"></ons-icon>
                                    </div>
                                    <ons-button class="scanner-button" modifier="large--cta" ng-click="scan()">スキャンする</ons-button>
                                </div>
                            </ons-page>
                        </ons-navigator>
                    </ons-template>
    
                    <ons-template id="loading.html">
                        <ons-alert-dialog>
                            <div class="alert-dialog-title">処理中...</div>
                            <div class="alert-dialog-content">
                                <ons-icon icon="ion-load-c" spin="true"></ons-icon> <span style="font-size: 13px; color: #999">商品情報を検索しています...</span>
                            </div>
                        </ons-alert-dialog>
                    </ons-template>
    
                    <ons-template id="history.html">
                        <ons-navigator var="navi">
                            <ons-page>
                                <ons-toolbar>
                                    <div class="center">スキャン履歴</div>
                                    <div class="right"><ons-toolbar-button ng-click="clearHistory()">クリア</ons-toolbar-button></div>
                                </ons-toolbar>                
    
                                <ons-list>
                                    <ons-list-item ng-repeat="product in history track by $index" 
                                        class="item-wrapper" >
    
                                        <ons-carousel swipeable style="height: 150px; width: 100%;" initial-index="0" auto-scroll　var="myCarousel">
    
                                            <ons-carousel-item class="list-action-menu">      
                                                <div class="item-title">{{product.name}}</div>                                
                                                <ons-row>
                                                    <ons-col width="90px">
                                                        <img ng-src="{{product.thumbnailUrl}}" class="item-image">
                                                    </ons-col>
                                                    <ons-col>
                                                        <div class="item-desc">
                                                            {{product.desc}}
                                                        </div>
                                                        <div class="item-price">
                                                            <span class="item-price-digit">{{product.price}}</span> <span class="item-price-unit">円</span>
                                                        </div>
                                                    </ons-col>
                                                </ons-row>
                                            </ons-carousel-item>
    
                                            <ons-carousel-item class="list-action-item">
                                                <ons-button ng-click="swipeDelete($index)">
                                                Remove
                                                <ons-icon icon="ion-trash-a">
                                                </ons-button>
                                            </ons-carousel-item>                        
    
                                        </ons-carousel>
    
                                    </ons-list-item>                    
                                </ons-list>
                                <div ng-show="history.length === 0" class="empty-history">
                                    履歴がありません
                                </div>
                            </ons-page>
                        </ons-navigator>
                    </ons-template>
    
                </body>
                </html>
    
[/code]

app.js(追加)

[code]

        $scope.swipeDelete = function(i){
        　$scope.history.splice(i, 1);
        　myCarousel.setActiveCarouselItemIndex(0);
    　　}　
    
[/code]

[![画像の説明をここに入力](https://i.stack.imgur.com/QAJRp.jpg)](https://i.stack.imgur.com/QAJRp.jpg)


CC BY-SA 3.0
2016-02-26T12:34:44.600
22571
2016-02-27T15:43:55.523
2016-02-27T13:28:50.617
76
14390
question
monaca html onsen-ui angularjs
左スワイプ（ons-carousel）で削除ボタンを表示→クリックで該当アイテムを削除→次のアイテムが左スワイプされて表示される


[How to refresh a list with an ons-carousel when ons-lazy-repeat detects a
change](https://stackoverflow.com/questions/29241885/how-to-refresh-a-list-
with-an-ons-carousel-when-ons-lazy-repeat-detects-a-change)に似たような質問があります。

`ng-repeat`で繰り返した場合、`myCarousel`は最後の`ons-carousel`に対して付けられるため、うまく動作しないようです。  
`var="carousel.{{$index}}"`とすることで、配列として扱えるようです。

index.html

[code]

    <ons-carousel swipeable style="height: 150px; width: 100%;" initial-index="0" auto-scroll var="carousel.{{$index}}">
        // 省略
    </ons-carousel>
    
[/code]

app.js

[code]

    $scope.swipeDelete = function(i) {
        $scope.carousel[i].prev({animation: 'none'});
        $scope.history.splice(i, 1);
    };  
    
[/code]


CC BY-SA 3.0
2016-02-27T15:43:55.523
22607
2016-02-27T15:43:55.523
2017-05-23T12:38:56.467
-1
9566
22571
answer