2017-02-08 14 views
-1

私は遠隔データ呼出しから検索されたリストまでmdオートコンプリートを持っています。結果をアルファベット順に並べ替えるのですが、orderByは配列を期待しており、約束どおりに動作しません。角度材料オートコンプリートOrderBy約束

SCENARIO 1

これは返された約束で動作しますが、[並べ替えをサポートしていない私の現在の実装です。

HTML

<md-autocomplete 
    md-no-cache="true" 
    ng-model-options="{debounce: 250}" 
    md-selected-item="criteria.orderByClientUser" 
    md-search-text="searchText" 
    md-items="item in getClientUsers(searchText)" 
    md-item-text="item" 
    md-min-length="0" 
    placeholder="First Last"> 
    <md-item-template>{{item}}</md-item-template> 
    <md-not-found>No matches found.</md-not-found> 
</md-autocomplete> 

コントローラ

$scope.getClientUsers = function(text) { 
    if(!text) return []; 
    text = text.toLowerCase(); 
    return clientUserProfileService.findByName(text); 
} 

ClientUserProfileService

service.findByName = function(name) { 
    return $http.post(searchUrl, name, { withCredentials: true }).then(res => res.data); 
} 

シナリオ2

この実装はデータをスコープに適用しますが、約束が解決する前に関数が終了するため、オートコンプリートリストは更新されません。

HTML

<md-autocomplete 
    md-no-cache="true" 
    ng-model-options="{debounce: 250}" 
    md-selected-item="criteria.orderByClientUser" 
    md-search-text-change="getClientUsers(searchText)" 
    md-items="item in userList | orderBy" 
    md-item-text="item" 
    md-min-length="0" 
    placeholder="First Last"> 
    <md-item-template>{{item}}</md-item-template> 
    <md-not-found>No matches found.</md-not-found> 
</md-autocomplete> 

コントローラ

$scope.userList = []; 

$scope.getClientUsers = function(text) { 
    if(!text) return []; 
    text = text.toLowerCase(); 
    clientUserProfileService.findByName(text) 
     .then(_.mountP($scope, "userList")); 
} 

ClientUserProfileService

service.findByName = function(name) { 
    return $http.post(searchUrl, name, { withCredentials: true }).then(res => res.data); 
} 

約束で動作するようにORDERBYを設定する方法はありますか?または、約束が解決されるまでgetClientUsersが返るのを遅らせる方法がありますか?このクエリは非常に速いので、私はサービスメソッドを延期して小さなタイムアウトでラップすることができますが、これはコピーアウトのようです。

ありがとうございました!

** 更新されたコード ** - それでも(getClientUsersから返される約束につながる)ORDERBY

Error: [orderBy:notarray] 

HTML

<md-autocomplete 
    md-no-cache="true" 
    ng-model-options="{debounce: 250}" 
    md-selected-item="criteria.orderByClientUser" 
    md-search-text="searchText" 
    md-items="item in getClientUsers(searchText) | orderBy" 
    md-item-text="item" 
    md-min-length="0" 
    placeholder="First Last"> 
    <md-item-template>{{item}}</md-item-template> 
    <md-not-found>No matches found.</md-not-found> 
</md-autocomplete> 

コントローラ

$scope.getClientUsers = function(text) { 
    if(!text) return []; 
    text = text.toLowerCase(); 
    return clientUserProfileService.findByName(text) 
     .then(function (data) { 
      return data; 
     }); 
} 
では動作しません。

クライアントユーザープロファイルサービス

service.findByName = function(name) { 
    return $http.post(searchUrl, name, { withCredentials: true }).then(res => res.data); 
} 

答えて

2

シナリオ#2ニーズ約束戻ります:

//Scenario #2 

$scope.userList = []; 

$scope.getClientUsers = function(text) { 
    if(!text) return []; 
    text = text.toLowerCase(); 
    //vvvv return derived promise 
    return clientUserProfileService.findByName(text) 
     .then(function (data) 
      //_.mountP($scope, "userList") 
      //do something to data 
      //vvvv return data to chain 
      return modifiedData; 
    ); 
} 

を新しい派生約束を返し約束の.thenメソッドを呼び出し、のチェーンを作成することが容易に可能であるため、約束する。任意の長さのチェーンを作成することが可能です。約束は別の約束(それ以上の解決を遅らせるでしょう)で解決することができます。、チェーン内のどの時点でも約束を一時停止/延期することができます。これにより、強力なAPIを実装することが可能になります。

-- AngularJS $q Service API Reference - Chaining Promises


orderBy

AngularJSフィルタを使用してデータを注文する:AngularJS orderBy Filter API Referenceを参照して、詳細について

$scope.getClientUsers = function(text) { 
    if(!text) return []; 
    text = text.toLowerCase(); 
    //vvvv return derived promise 
    return clientUserProfileService.findByName(text) 
     .then(function (data) 
      //_.mountP($scope, "userList") 
      //do something to data 
      var orderByData = $filter("orderBy")(data); 
      //vvvv return data to chain 
      return orderByData; 
    ); 
} 

を。

+0

おそらく私は間違っていますが、これを実装すると、getClientUsersメソッドは、orderByでサポートされていないデータではなく、約束を返します。これはシナリオ#1と同じ状況でした。私はあなたの答えを誤解しましたか?私は現在の作業コードで質問を更新しました –

関連する問題