SinSync SinSync - 3 months ago 24
AngularJS Question

material virtual-repeat update list on ng-change of filter input and reset index?

I've replicated the scenario in this plnkr:

<input type="text" ng-model="search.id" ng-change="ctrl.infiniteItems.fetchMoreItems_()">


var vm = this;
vm.infiniteItems = {
numLoaded_: 0,
toLoad_: 0,
items: [],

// Required.
getItemAtIndex: function(index) {
if (index > this.numLoaded_) {
this.fetchMoreItems_(index);
return null;
}

return this.items[index];
},

// Required.
getLength: function() {
return this.numLoaded_ + 3;
},

fetchMoreItems_: function(index) {
if (this.toLoad_ < index) {
this.toLoad_ += 10;
var filtered = [];
fetcher.fetch($scope.search.id).then(angular.bind(this, function(obj) {
this.items = obj;
this.numLoaded_ = this.toLoad_;
if (obj.length <= this.toLoad_) {
this.items = this.items.concat(obj);
this.numLoaded_ = this.toLoad_;
}
}));
}
}
}


https://plnkr.co/edit/vnrEOmQJ96ZETQpzlaMj

I want to update the view when I enter a value, right now I can filter but i get the results only when I scroll which calls the method from the controller and displays results on the top and never stops scrolling, returns empty rows once the results are over.

I want it to stop when that happens, like it behaves without filters.

Answer

Is this the kind of thing you want? - Plunker

Markup

<input type="text" ng-model="search.id" ng-change="inputChange()">

JS

vm.infiniteItems = {
    numLoaded_: 0,
    toLoad_: 0,
    items: [],

    // Required.
    getItemAtIndex: function(index) {
      if (index > this.numLoaded_) {
        this.fetchMoreItems_(index);
        return null;
      }

      return this.items[index];
    },

    // Required.
    getLength: function() {
      return this.numLoaded_ + 3;
    },

    fetchMoreItems_: function(index) {
      if (this.toLoad_ < index) {
        this.toLoad_ += 10;
      }
    }
};

$scope.inputChange = function () {
    console.log($scope.search.id);
     fetcher.fetch($scope.search.id).then(angular.bind(this, function(obj) {
         console.log(obj);
         vm.infiniteItems = obj;
    }));
}