스크롤 시 자동 검색 결과를 입력할 새 데이터 추가

스크롤 시 자동 검색 결과를 입력할 새 데이터 추가

사용하고 있습니다.angular bootstrap typeahead. 에 대한 기능을 추가하고 싶습니다.infinite scroll그것을 위해 스크롤 기능에 대한 작은 지침과 약간의 변경 사항을 추가했습니다.typeaheadtemplate, 스크롤 지시문은 예상대로 작동하지만 type ahead는 결과가 업데이트된 후 보기를 업데이트하지 않습니다.

제가 입력한 내용은 다음과 같습니다.

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

자동 검색 템플릿:

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

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

미리 입력 입력을 입력하면 잘 작동하지만 미리 입력 템플릿으로 스크롤하면 함수가 호출되고 업데이트됩니다.lastResult변수가 있지만 미리 입력하는 DOM 요소를 업데이트하지 않았습니다.

도와줄 사람?제발..

이거 먹어봐요.

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

비슷한 내용을 작성했는데 스크롤 대신 클릭되는 버튼이 있었습니다.

UI Bootstrap은 지시문의 API를 노출하지 않으므로 Type ahead 지시문으로 전송된 데이터를 조작하는 지시문을 통해 추가 컨트롤러를 추가해야 했습니다.

한마디로 더러웠고, UI 부트스트랩이 아닌 타이프 어헤드 기능을 위한 다른 라이브러리를 찾아보는 것을 추천합니다.

루트 스코프 또는 스코프의 바인딩 변수인지 확인합니다. 스코프 또는 루트 스코프가 변경되면 $scope.apply()와 동일하게 적용되므로 내부적으로 $apply/$digest를 호출하여 UI에 반영합니다.

이것을 작동시키기 위해 UI 부트스트랩 소스를 편집하고 UibTypeahead Controller에 이벤트 리스너를 추가해야 했습니다.getMatchesAsync 기능 이상:

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

사용자가 하단으로 스크롤하면 load more event scope을 내보냅니다.$emit('loadMore').이렇게 하면 스크롤 시 일치하는 목록을 업데이트할 수 있습니다.

언급URL : https://stackoverflow.com/questions/32218864/add-new-data-to-typeahead-result-on-scroll