angularjs - example - ng-select angular 4

Agregue nuevos datos al resultado de typeahead en scroll

Question

Estoy usando angular bootstrap typeahead . Me gustaría agregar una funcionalidad para infinite scroll en eso, para eso he agregado una pequeña directiva para la funcionalidad de desplazamiento y algunos cambios en la plantilla de typeahead , la directiva de desplazamiento funciona como se esperaba pero typeahead no actualiza una vista después de que se actualice el resultado.

Mi entrada es como

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

plantilla typeahead :

<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>

y Función getObject :

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

cuando escribo algo en la entrada de typeahead funciona bien, pero cuando me desplazo a la plantilla de typeahead, llama a una función y actualiza la variable lastResult pero no actualiza un elemento DOM de typeahead .

¿Alguna ayuda? Por favor....

Answer 1

Compruebe si está enlazando la variable de rootscope o alcance. después de cualquier cambio en el alcance o en el visor, simplemente aplíquelo como $ scope.apply (). así que llamará internamente a $ apply / $ digest y lo reflejará en la interfaz de usuario.

Answer 2

Había escrito algo similar, pero en lugar de utilizar el desplazamiento, había un botón en el que se hacía clic.

UI Bootstrap no expone ninguna API de sus directivas y, como tal, se me exigió que extendiera su plantilla, y agregue un controlador adicional a través de una directiva que manipularía los datos tal como se envían a la directiva de escritura anticipada.

En resumen, estaba sucio, y recomendaría tratar de encontrar otra biblioteca para la funcionalidad de escritura anticipada que no sea UI Bootstrap.

Answer 3

Para que esto funcionara, tuve que editar la fuente de arranque de la interfaz de usuario, agregando un detector de eventos al UibTypeaheadController. Por encima de la función getMatchesAsync:

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

Cuando el usuario se desplaza a la parte inferior, emito la carga más el alcance del evento. $ Emit (''loadMore''). Esto permite que la lista de coincidencias se actualice en el desplazamiento.

Answer 4

Por favor, pruebe este !!

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