如何使用 Angular JS 根据特定的下拉值过滤 typeahead

Question

我的要求是我必须根据一个下拉列表中的值过滤输入 JSON 数据，这意味着如果下拉列表值为 "agency1"，那么我只能显示 [=31] 的值=] 对象在 "agency" 键中具有 "agency 1" 值。

我的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 我的问题是它是根据 "agency" 过滤的，而不是针对 "agency" 的特定值（意味着选择的下拉值，如 "agency1"）。谁能告诉我怎样才能做到这一点？

Answer 1

您对提前输入的过滤仅按提前输入输入进行过滤，而不是 selected 机构。将过滤器更改为：

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

它会起作用。

更新：这是可行的，但是当您再次 select "All" 时，您将得不到任何结果。要解决此问题，请使用此过滤器：

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

此过滤器将检查selectedAgency 中的字符串是否为空，如果为空，会将代理过滤器设置为未定义，因此不会影响过滤器。

如何使用 Angular JS 根据特定的下拉值过滤 typeahead

how to filter typeahead on basis of a particular dropdown value using Angular JS

json

angularjs

angular-ui-typeahead