添加新數據以滾動顯示結果

我正在使用angular bootstrap typeahead。我想爲infinite scroll添加一個功能，因爲我爲滾動功能添加了一個小指令，並且在typeahead模板中進行了一些更改，滾動指令的工作方式與預期的相同，但在更新結果後鍵入不更新視圖。添加新數據以滾動顯示結果

我的輸入是這樣的：

<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功能：

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

當我輸入鍵盤緩衝輸入的東西它的工作原理精細，但是當我滾動到typeahead模板時，它會調用一個函數並更新lastResult變量，但未更新類型的DOM元素。

任何幫助？請....

來源

2015-08-26 Arjun

你在結果更新後嘗試過'$ scope.apply（）'嗎？ – Anita

[訪問此鏈接https://github.com/angular-ui/bootstrap/blob/master/src/typeahead/typeahead.js 您可能想編輯該文件 – samir

我寫了類似的東西，但沒有使用滾動，有一個按鈕被點擊。

UI Bootstrap不公開任何API指令，因此我需要擴展它們的模板，並通過一個指令來添加一個額外的控制器，該指令將操作數據發送到提前輸入指令。

簡而言之，它很髒，我建議您嘗試爲UI Bootstrap以外的其他類型的函數尋找類型。

來源

2015-09-02 20:55:57

檢查您是否是rootcope或scope的綁定變量。在範圍或者根目錄的任何改變之後的就像$ scope.apply（）一樣應用它。所以它會在內部調用$ apply/$ digest並在UI中反映它。

來源

2015-09-03 07:06:53 Shrinath

請試試這個！

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

來源

2016-02-05 10:56:48

爲了使這個工作，我不得不編輯UI引導源，添加一個事件偵聽器到UibTypeaheadController。上述getMatchesAsync功能：

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

當用戶滾動到的底部，我發射負載多個事件範圍$發射（「loadMore」）。這允許在滾動時更新匹配列表。

來源

2016-07-19 19:29:18 JamesIngold

添加新數據以滾動顯示結果

回答

相關問題