Is there a way to refresh virtual repeat container?

Question

I've got a md-virtual-repeat-container that handles the data from an API call triggered by a search box. I'd like to be able to refresh this container when a user enters a second search query.

I'm using a setup similar to this plnkr which is from this question:. The only difference is its getting data from a server when the user enters a search term.

My Question

Is there a way to trigger a refresh an md-virtual-repeat-container?

---

I don't think the code is relevant but here's my (simplified) production code:

    var self = this;
    self.infiniteItems = {
        numLoaded_: 0,
        toLoad_: 0,
        items: [],
        getItemAtIndex: function (index) {
        if (index > this.numLoaded_) {
            this.fetchMoreItems_(index);
                return null;
            }
            return this.items[index];
         },
         getLength: function() {
            return this.numLoaded_ + 25;
         },
         fetchMoreItems_: function (index) { 
             if (this.toLoad_ < index) {
                 this.toLoad_ += 5;
                 var offset = 0;

                 $http({
                     method: 'GET',
                     datatype: 'json',
                     url: '{my-api-call}',
                     contentType: "application/json; charset=utf-8",
                     cache: false,
                     params: {
                         param: query,
                         page: offset
                     }
                  }).then(angular.bind(this, function (obj) {
                     this.items = this.items.concat(obj.data.SearchResults);
                     this.numLoaded_ = this.toLoad_;
                     this.offset++;
                     $scope.searchResults = obj.data.SearchResults;
                  }));
             } 
         }
    };

Ethaethan

Answer 1

You can force a redraw of your md-virtual-repeat container by triggering a fake window resize event (this causes the directive to call its private handleScroll_() method which then calls containerUpdated()).

This will trigger a fake window resize event:

angular.element(window).triggerHandler('resize');

Herbartian

I'll give this a try, if it works out I'll select your answer as the solution. thanks – Ethaethan

finally a great answer, honestly wish there was a cleaner solution, in my case I had to wrap $timeout to wait for tabs to finish changing and then re-draw – Faden

You just saved my $#! ^^. – Claudicant

Answer 2

You can also use this to cause refresh of items in specific scope and not in the entire document:

scope.$broadcast('$md-resize')

Chekiang

Answer 3

Resetting the model should also work.

In your case you could a have a new function on infiniteItems:

refresh : function() {
            this.numLoaded_= 0;
            this.toLoad_ = 0;
            this.items = [];
          }

Wart

Answer 4

I'm going to post my solution since there isn't an answer yet. If an better answer gets posted I'll gladly accept it.

First, I migrated all of my search result code into it's own template, directive and controller.

Next, I added an empty container in place of my logic. I'll use this as a place to dump my directive dynamically every time I search.

`<div id="search-result-container"></div>`

Finally, I dynamically appended my new directive like this

$scope.handleHotlineSearchClick = function () {           
    var query = $('#legal-search-input').val();

    if (query != "") {
        $scope.searchLoaded = false;
        $('#search-result-container').empty().append($compile("<search-result></search-result>")($scope));
    }
};

This way every time the user enters a new search term the directive gets reloaded.

Ethaethan