使用angular-ui bootstrap和typeahead-loading

所以我似乎無法弄清楚如何使用typeahead-loading屬性來顯示一個微調，而我的typeahead正在獲取遠程數據。我找不到任何地方使用它的例子。使用angular-ui bootstrap和typeahead-loading

在開始請求時，我們需要在範圍中手動設置該值嗎？然後在請求完成時手動將其設置爲false？有時候，這些有棱角的東西是有魔力的，我不確定是否在後端發生了一些額外的事情來處理這些事情。

只是一個簡單的例子來說明如何使用typeahead-loading的值會很好。我只是想不出如何正確使用它。當然，大多數角度文檔都缺乏一些更復雜功能的好例子。

2013-09-26 bjo

這不是在技術上和您的問題的答案，而是一個完全不同的方法的建議。我真的不喜歡使用外部微調器/ div/span /等。我更喜歡在typeahead輸入標記中使用placeholder =「{{someScopeVar}}」和typeahead-on-select =「onSelect（$ item，$ model，$ label）」，將$ scope.someScopeVar初始化爲「loading .. 。「在控制器中，然後使用onSelect函數將$ scope.someScopeVar更改爲常規佔位符文本，如」按名稱搜索「。 –

在我看來，這個文檔並不是很不清楚：「綁定到一個變量[...]」。因此，您只需在當前範圍中指定一個變量，並在查詢運行時將其設置爲true。這裏是一個非常愚蠢的例子，是想說明發生了什麼：

function MainController($scope) { 
    $scope.lookup = function() { 
    console.log("isLoading is " + $scope.isLoading); 
    return []; 
    } 
} 

<div ng:controller="MainController"> 
    <input type="text" ng:model="search" 
    typeahead="result for result in lookup($viewValue)" 
    typeahead-loading="isLoading"></input> 
    isLoading: {{isLoading}} 
</div>

如果你運行這個並輸入到搜索的東西，你會發現，輸出爲「isLoading：假」。但是，在JavaScript控制檯上，您會看到在查找函數運行時，$ scope.isLoading被設置爲true。

所以只需指定與預輸入加載您的作用域的變量，然後你可以做這樣的事情：

<div ng:show="!!isLoading">loading...</div>

來源

2013-09-26 19:25:15

謝謝，現在事情變得更有意義。很好的例子 – bjo

沒有必要去通過函數（我不知道，反正）：

<input ng-model="search" typeahead="result for result in lookup($viewValue)" 
    typeahead-loading="is_loading"> 

<!-- change class (or something) when lookup is loading --> 
<span ng-class="{'loading-class': is_loading}">Hey, I'm loading!</span>

來源

2015-05-04 05:38:34 MFB

你錯過了爲什麼我的例子使用了一個函數。 –

我明白了，你只是使用一個函數來打印到控制檯？ – MFB

不錯的解決方案，像一個魅力工作！ – devo

使用angular-ui bootstrap和typeahead-loading

回答

相關問題