Question

我在Ionic中创建了一个简单的应用程序，其主页面包含最后查看的部分和收藏页面。当我查看某个项目时，它会被添加到最后查看的列表中，但是在重新加载之前它不会显示在页面上，收藏夹按钮会发生同样的情况，是否有任何解决方法？

这是我用来创建最后一个视图列表的函数，它传入项目的id并将其添加到本地存储。第二个函数用于ng-repeat过滤器以显示已查看的项目。

$scope.lastview = function(id) {
//checks if the id being passed in is already in the array
//if it isn't it will add it to the beginning array then stringify it
var c = JSON.parse($window.localStorage['last']);
  if (last.indexOf(id) == -1){
    if (c.length > 3){
      last.pop();
      }
    last.unshift(id);
    $window.localStorage['last'] = JSON.stringify(last);
    }
}

var f = JSON.parse($window.localStorage['last']);

// this one is used for last viewed offices
$scope.ifinfav2 = function(office){
  return f.indexOf(office.id) !== -1;
};

上次查看的主视图。

<ion-view view-title="Main Page">
<!-- Favourites button -->
    <ion-nav-buttons side="right">
        <button class="button icon ion-android-star" ui-sref="Favourites">
        </button>
    </ion-nav-buttons>

    <ion-content>
    <!-- Search function starts here -->
        <label class="item item-input">
            <i class="icon ion-search placeholder-icon"></i>
            <input type="search" id="search-criteria" placeholder="City, Country or Office Name" ng-model="query[queryBy]">
        </label>
        <!-- Search function ends here -->
        <!-- Main content starts here -->
        <!-- ng-show hides the list of offices and displays them when the user starts searching  -->
        <ion-list ng-show="query[queryBy]">
        <!-- Creates each item through collection-repeat and is filtered by the query linked to the search field -->
        <!-- ng-click opens the modal that will have the enlarged office address and the map of the office -->
            <ion-item class="item-text-wrap item-icon-right" id="output" collection-repeat="office in offices|filter:query" ng-controller="ModalCtrl" ng-click="openModal(); lastview(office.id);">
                <!-- Outputs all the data from offices.json -->
                <h3 id="LocName">{{office.LocationName}}</h3>
                <p id="details">{{office.LocAddressLine1 + ", " + office.LocAddressLine2 + ", " + office.LocCity + ", " + office.LocCountryDescription + ", " + office.LocZipPostalCode}}</p>

                <!-- Creates the favourite icon on each list item, when the star is clicked the togglefav function is run -->
                <i ng-class="{'icon ion-android-star': favicon(office.id), 'icon ion-android-star-outline': !favicon(office.id)}" ng-click="togglefav(office.id); $event.stopPropagation();"></i>
            </ion-item>
        </ion-content>

        <!-- Last view offices list, currently only updates on app refresh -->
        <div id="cont" ng-hide="query[queryBy]">
                <h3 class="title" id="text">Last Viewed</h3>
            <!-- the filter with this collection repeat runs the function ifinfav2 which only displays items in the localstorage -->
                <ion-item id="fav" class="item-icon-right" ng-repeat="office in offices|filter:ifinfav2" ng-controller="ModalCtrl" ng-click="openModal(office.id);">
                <h3>{{office.LocationName}}</h3>
                <p id="details">{{office.LocAddressLine1 + ", " + office.LocAddressLine2 + ", " + office.LocCity + ", " + office.LocCountryDescription + ", " + office.LocZipPostalCode}}</p>
                <i ng-class="{'icon ion-android-star': favicon(office.id), 'icon ion-android-star-outline': !favicon(office.id)}" ng-click="togglefav(office.id); $event.stopPropagation();"></i>
                </ion-item>
            </ion-list>
        </div>

</ion-view>

在angularjs中自动更新页面

0 个答案: