按名称AngularJS搜索目的地

Question

这是视图页面上目的地文本框的代码

<input name="states" id="city"
      style="margin-left: 0px;margin-right: 109px; font-size: 14px"
      type="text" placeholder="Any worldwide city or airport" 
      ng-model="selectedNumberNonEditable" allow-custom="false"
      typeahead="state as state.name + '' + state.code + '' for state in states | filter:{code:$viewValue} | limitTo:8"
      class="form-control" required>

这是searchcontroller.js

 var states = [
  { 'name': 'Ansan, South Korea', 'code': '(A1N)' },
  { 'name': 'Asan, South Korea', 'code': '(A1S)' },   
  { 'name': 'Atascadero - CA, United States', 'code': '(AA1)' },     
  { 'name': 'Arlon, Belgium', 'code': '(AAO)' },
   { 'name': 'London, United Kingdom', 'code': '(LON)' },

]

在这种情况下，

仅显示我们通过代码搜索的结果。我想在搜索目的地名称时显示结果。

通过Airpot搜索

按城市名称搜索

请帮帮我。

Answer 1

戒，

似乎您没有使用输入字段

映射对象

首先 替换这个

 var states 

带

 $scope.states 

要过滤结果，您可以参考角度过滤器，例如以下示例

<div ng-app="myApp" ng-controller="namesCtrl">

  <p><input type="text" ng-model="test"></p>

 <ul>
   <li ng-repeat="x in names | filter : test">
   {{ x }}
  </li>
 </ul>

详细的例子 https://www.w3schools.com/angular/tryit.asp?filename=try_ng_filters_input

Answer 2

您需要更改input，如下所示

<input name="states" id="city" style="margin-left: 0px;margin-right: 109px; font-size: 14px" type="text" placeholder="Any worldwide city or airport" ng-model="selectedNumberNonEditable" allow-custom="false" typeahead="state as state.name + '' + state.code + '' for state in states | filter:$viewValue | limitTo:8" class="form-control" required>

我已从过滤器中删除code。