Add new data to typeahead result on scroll
Asked Answered
M

4

24

I'm using angular bootstrap typeahead. I would like to add a functionality for infinite scroll in that, for that i have added a small directive for scroll functionality and some changes in typeahead template, scroll directive works as expected but typeahead not updating a view after result is update.

My input is like :

<input type="text" ng-model="variable" placeholder="Search..." typeahead="obj as obj.text for obj in getObject($viewValue)" typeahead-wait-ms="500" />

typeahead template :

<ul class="dropdown-menu typeahead-custom" ng-scroll="getObject('{{query}}')" ng-scroll-direction="down" ng-show="isOpen()" ng-style="{top: position.top+'px', left: position.left+'px'}" style="display: block;" role="listbox" aria-hidden="{{!isOpen()}}">
    <li ng-repeat="match in matches track by $index" ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)" role="option" id="{{match.id}}" should-focus="isActive($index)">
        <div typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div>
    </li>
</ul>

and getObject Function :

$rootScope.lastResult = [];
$rootScope.getObject = function(str) {
    return  $http({
        url: "someUrl",
        method: "post",
        headers: {'Content-Type': 'application/json'},
        data: {str: str, page_limit: 10}
    }).then(function(response) {
        $.merge($rootScope.lastResult, response.data.data);
        return $rootScope.lastResult;
    });
};

when I type something in typeahead input it works fine, but when i scroll into the typeahead template it calls a function and updating lastResult variable but didn't updating a DOM element of typeahead.

Any help? Please....

Miliaria answered 26/8, 2015 at 5:48 Comment(2)
have you tried $scope.apply() after result update?Manoff
[visit this link github.com/angular-ui/bootstrap/blob/master/src/typeahead/… You might want to edit that filePlutocracy
C
1

Please try this one !!

$rootScope.lastResult = [];
$rootScope.getObject = function(str) {
    return  $http({
        url: "someUrl",
        method: "post",
        headers: {'Content-Type': 'application/json'},
        data: {str: str, page_limit: 10}
    }).then(function(response) {
        $rootScope.$apply(function(){
         $.merge($rootScope.lastResult, response.data.data);
        });
        return $rootScope.lastResult;
    });
};
Contractual answered 5/2, 2016 at 10:56 Comment(0)
S
0

I had written something similar but instead of using scroll, there was a button which was clicked.

UI Bootstrap does not expose any API of their directives and as such I was required to extend their template, and add an additional controller via a directive which would manipulate the data as sent to the type ahead directive.

In short, it was dirty, and I would recommend trying to find another library for type ahead functionality other than UI Bootstrap.

Sodamide answered 2/9, 2015 at 20:55 Comment(0)
C
0

check whether you are binding variable of rootscope or scope. after any change in scope or rootscope just apply it just like $scope.apply(). so it'll call $apply/$digest internally and reflect it in UI.

Clathrate answered 3/9, 2015 at 7:6 Comment(0)
C
0

To get this to work, I had to edit the UI bootstrap source, adding an event listener to the UibTypeaheadController. Above the getMatchesAsync function:

originalScope.$on('loadMore', function() {
  hasFocus = true;
  getMatchesAsync(modelCtrl.$viewValue);
});

When the user scrolls to the bottom, I emit the load more event scope.$emit('loadMore'). This allows the list of matches to be updated on scroll.

Composer answered 19/7, 2016 at 19:29 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.