データ更新時にリスト条件を保存するAngularJS

Question

私はアイテムのリストを持っています、それぞれのアイテムは拡張可能です。私はuib-collapseを使っています。データを受け取るたびに、配列の各オブジェクトにisCollapsedプロパティを追加します。次に、それらをng-repeatを使用してUIリストにバインドします。しかし、毎分データをリフレッシュする必要があります。問題はここにあります：配列が更新されたため、すべての展開された項目が閉じられています。リストの状態を保存し、データの更新時にアイテムを展開する必要があります。誰でも助けてくれますか？

Answer 1

使用する$のlocalStorage

ページを更新する場合$scope.listが$localstorageから値を取得します

.controller("MyCtrl",function($scope,$localStorage){ 

    if($localStorage.list != null) 
     $scope.list = $localStorage.list; 

    $scope.add = function(obj){ 
     $scope.list.push(obj); 
     $localStorage.list = $scope.list; 
    } 

}); 

、$localstorageのparamにデータを割り当て、ページが更新されたら、データをバックセット。

Answer 2

あなたのリストアイテムを指すブールフラグのマップを使用し、これらのフラグをuib-collapseの値として使用してください。

JS：

$scope.reload = function() { 
    $http.get('list.json').then(function (data) { 
    $scope.list = data && data.data || []; 
    }); 
}; 

$scope.collapsedFlags = {}; 

$scope.reload(); 

HTML：

<div class="well well-lg" ng-repeat="item in list track by item.id"> 
    <button class="btn btn-default" 
      ng-click="collapsedFlags[item.id] = !collapsedFlags[item.id]"> 
    {{ item.isCollapsed ? '+' : '-' }} 
    </button> 
    <div uib-collapse="collapsedFlags[item.id]" ng-bind="item.value"></div> 
</div> 

PLUNKER：https://plnkr.co/edit/87vVb8Jjyz6yFGAjiHBK?p=preview