2016-07-05 52 views
1

我的要求是我必須根據一個下拉值中的值過濾輸入JSON數據,意思是如果下拉值爲「agency1」,那麼我可以顯示值只有在「代理」鍵中具有「代理1」值的JSON對象。如何使用Angular JS在特定下拉值的基礎上過濾typea

我的JSON是這個 -

$scope.myAgencies= [ 



    { 
    "agency": "Agency1", 
    "category" : "Plan", 
    "name" : "ABC plan8", 
    "type" : "BHC Plan" 
    }, 
    { 
    "agency": "Agency1", 
    "category" : "Plan", 
    "name" : "ABC plan", 
    "type" : "PHC" 
    }, 
    { 
    "agency": "Agency2", 
    "category" : "Plan", 
    "name" : "LMN plan", 
    "type" : "CHC" 
    }, 
    { 
    "agency": "Agency2", 
    "category" : "Plan", 
    "name" : "ABC plan", 
    "type" : "BHC Plan" 
    }, 
    { 
    "agency": "Agency3", 
    "category" : "Plan", 
    "name" : "ABC plan", 
    "type" : "PHC" 
    }, 
    { 
    "agency": "Agency3", 
    "category" : "Plan", 
    "name" : "ABC quote", 
    "type" : "CHC" 
    }, 
    { 
    "agency": "Agency3", 
    "category" : "Plan", 
    "name" : "LMN Quote", 
    "type" : "PHC" 
    } 


]; 

我通過一個函數得到那個下拉的價值和存儲它的價值就像這 -

$scope.listByCategory= function(){ 

$scope.result=$scope.selectedAgency; 
} 
在預輸入

我給喜歡這 -

<input type="text" ng-model="customSelected" id="inputTypeahead" placeholder="Custom agency" typeahead="agency.result as agency.name for agency in myAgencies | filter:$viewValue" typeahead-template-url="agencyTemplate.html" class="form-control"> 

我在這裏創建了一個plunker- https://plnkr.co/edit/HNgxjCajodFM6onsRMQH?p=preview 我的問題是,它是基於「代理」而不是針對「代理」的特定值進行過濾(意味着選擇了像「代理1」的下拉值)。任何人都可以告訴我如何實現這一目標?

回答

1

您針對提前輸入的篩選僅根據提前輸入進行篩選,而不是選定的代理機構。 更改過濾器到這個:

filter:{name: $viewValue, agency: selectedAgency} 

它會工作。

更新: 這是行得通的,但是當你再次選擇「全部」時,你將得不到結果。爲了解決這個問題,使用此過濾器:

filter:{name: $viewValue, agency: selectedAgency.length ? selectedAgency : undefined} 

這個過濾器會檢查是否在selectedAgency字符串不爲空,如果是空的,將設置機構未定義的過濾器,這樣就不會影響過濾器。

+0

其工作。非常感謝Ron Dadon! – Aanchal

+0

我想把JSON數據放在外部文件中,它的名字是agency.json。那麼如何從該文件中獲取json值並在選定機構的基礎上應用類似的過濾器? @RonDadon – Aanchal

+0

例如,您需要使用$ http服務讀取它。 https://docs.angularjs.org/api/ng/service/$http –