Question

我的json是通过以下链接呈现的： http://maps.googleapis.com/maps/api/geocode/json?address=SFO

JSON渲染仅通过参数示例：？adress = sfo 。它返回SFO参数的所有值。

{
   "results" : [
      {
         "address_components" : [
            {
               "long_name" : "San Francisco International Airport",
               "short_name" : "San Francisco International Airport",
               "types" : [ "establishment", "point_of_interest" ]
            },
            {
               "long_name" : "San Francisco",
               "short_name" : "SF",
               "types" : [ "locality", "political" ]
            },
            {
               "long_name" : "San Mateo County",
               "short_name" : "San Mateo County",
               "types" : [ "administrative_area_level_2", "political" ]
            },
            {
               "long_name" : "California",
               "short_name" : "CA",
               "types" : [ "administrative_area_level_1", "political" ]
            },
            {
               "long_name" : "United States",
               "short_name" : "US",
               "types" : [ "country", "political" ]
          },
            {
               "long_name" : "94128",
               "short_name" : "94128",
               "types" : [ "postal_code" ]
            }
         ],
         "formatted_address" : "San Francisco International Airport (SFO), San Francisco, CA 94128, USA",
         "geometry" : {
            "location" : {
               "lat" : 37.6213129,
               "lng" : -122.3789554
            },
            "location_type" : "APPROXIMATE",
            "viewport" : {
               "northeast" : {
                  "lat" : 37.6226618802915,
                  "lng" : -122.3776064197085
               },
               "southwest" : {
                  "lat" : 37.6199639197085,
                  "lng" : -122.3803043802915
               }
            }
         },
         "place_id" : "ChIJVVVVVYx3j4ARP-3NGldc8qQ",
         "types" : [ "airport", "establishment", "point_of_interest" ]
      }
   ],
   "status" : "OK"
}

但是，我只想为 types === airport 获取 formatted_address 。含义：我只想要机场的格式化地址。

<script>

        var app = angular.module('myApp', ['ui.bootstrap']);

        app.controller('myController', function($scope, $http){
            $http.get("https://raw.githubusercontent.com/vedvasa/airports/master/airports.json").then(function(response){$scope.airports = response.data.records;});    


            $scope.selected = undefined;

            $scope.getLocation = function(val) {
                return $http.get('http://maps.googleapis.com/maps/api/geocode/json', {
                  params: {
                    address: val,
                    sensor: false
                  }
                }).then(function(res){
                  var addresses = [];
                  angular.forEach(res.data.results, function(item){

                        addresses.push(item.formatted_address);

                  });
                  return addresses;
                });
              }; 

              $scope.on_item_selected=function($item, $model, $label)
              {
                  $scope.selected_item = $item;
              }
        });

</script>

HTML：

<input type="text" class="form-control" id="source" ng-model="asyncSelected" placeholder="Enter Airport Code or City Name" typeahead="address for address in getLocation($viewValue)" typeahead-loading="loadingLocations" typeahead-on-select="on_item_selected($item, $model, $label)">

Answer 1

你为什么不试试：

address for address in getLocation($viewValue) | filter: airportFilter

然后在你的控制器中：

$scope.airportFilter = function(obj) {
  var isAirport = false;
  if(typeof obj === 'array') {
   obj.forEach(function(item) {
      (item.toLowerCase() === 'airport') ? isAirport = true;
    });
  }
}

Answer 2

您可以使用选择和显示作为下拉列表，

 <select ng-model="selectedItem"    ng-options="port as port for port in arrString">
 </select>

<强>控制器

 $scope.formated = response.data.results[0].formatted_address;
 $scope.arrString = new Array();
 $scope.arrString = $scope.formated.split(',');

DEMO

想要使用Angular JS仅检索具有特定字段的字段

2 个答案: