Question

我有一个项目列表，每个项目都是可扩展的。我为此使用了uib-collapse。每次我收到数据时，都会将isCollapsed属性添加到数组中的每个对象。然后我使用ng-repeat将它们绑定到UI列表。但我需要每分钟更新一次数据。问题就出现了：由于阵列更新，所有扩展项都关闭了。我需要在数据刷新时保存列表状态和扩展项。谁能帮我？

Answer 1

使用$ localStorage

将您的数据分配到$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;
    }

});

如果您刷新页面$scope.list，则会获得$localstorage。

中的值

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

在数据刷新AngularJS上保存列表条件

2 个答案: