Dan Beaulieu Dan Beaulieu - 5 months ago 148
AngularJS Question

Is there a way to refresh virtual repeat container?

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;
}));
}
}
};

Answer

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.

Comments