Javascript AngularJS—如何从json响应中提取两段数据，并在select（组合框）中使用它们？_Javascript_Angularjs_Drop Down Menu_Factory

Javascript AngularJS—如何从json响应中提取两段数据，并在select（组合框）中使用它们？

javascript angularjs drop-down-menu

Javascript AngularJS—如何从json响应中提取两段数据，并在select（组合框）中使用它们？,javascript,angularjs,drop-down-menu,factory,Javascript,Angularjs,Drop Down Menu,Factory,我正在发出http.get请求以检索机场列表。json响应包含大量数据。它返回以下格式的对象列表 {"id":"1","name":"Goroka","city":"Goroka","country":"Papua New Guinea","iata":"GKA","icao":"AYGA","latitude":"-6.081689","longitude":"145.391881","altitude":"5282","timezone":"10","dst":"U","tz":"Pacif

我正在发出http.get请求以检索机场列表。json响应包含大量数据。它返回以下格式的对象列表

{"id":"1","name":"Goroka","city":"Goroka","country":"Papua New Guinea","iata":"GKA","icao":"AYGA","latitude":"-6.081689","longitude":"145.391881","altitude":"5282","timezone":"10","dst":"U","tz":"Pacific/Port_Moresby"}

我想提取国家和国际航空运输协会，并在我的html页面上选择显示它们，例如

巴布亚新几内亚吉卡
格陵兰乌克兰格

我已经用这两段数据（在工厂中）创建了一个对象数组，并将其返回到我的数组中，但我不知道如何在select中显示两段数据。

请查看

ng options

指令，该指令专门用于在

select

元素上使用

ng repeat

行为：。例如，假设可以在控制器中同步检索机场阵列：

module.controller('ctrl', function($scope, Airports) {
    $scope.airports = Airports.get();
    $scope.$watch('airportId', function(newValue) {
        console.log(newValue);
    });
});

在模板中，利用Angular的表达式解析：

<select ng-options="for item in airports" ng-model="airportId">
    <option value="item.id" ng-bind="item.country + ' ' + item.iata"></option>
</select>

您必须连接以下属性：

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

                <select ng-model="model.id" ng-options='note.id as (note.name+" "+note.iata) for note in notes' ></select>

                {{model.iata}}

            </div>

        </div>


{{model.iata}}

您需要在select语句上使用ng options指令

假设您的数据数组包含如下对象：

$scope.airports = [{id:1,name:"Papa New Guinea",iata: "GKA"},...]

您可以按如下方式在选择中显示它们：

<select ng-model="selectedAirport" ng-options="(itm.name + ' ' + itm.iata) for itm in airports"></select>

这是一个有效的

您不需要清除返回的JSON，您可以使用

ng选项

只打印您需要的内容：

<body ng-app="selectExample">
  <script>
    angular.module('selectExample', [])
      .controller('ExampleController', ['$scope', function($scope) {
        $scope.airports = [{
          "id": "1",
          "name": "Goroka",
          "city": "Goroka",
          "country": "Papua New Guinea",
          "iata": "GKA",
          "icao": "AYGA",
          "latitude": "-6.081689",
          "longitude": "145.391881",
          "altitude": "5282",
          "timezone": "10",
          "dst": "U",
          "tz": "Pacific/Port_Moresby"
        }, {
          "id": "2",
          "name": "RAF Cranwell",
          "city": "Coningsby",
          "country": "Lincolhshire",
          "iata": "QCY",
          "icao": "EGXC",
          "latitude": "",
          "longitude": "",
          "altitude": "",
          "timezone": "10",
          "dst": "U",
          "tz": ""
        }];
      }]);
  </script>
  <div ng-controller="ExampleController">

    <label>Airport:
      <select ng-model="selectedAirport" ng-options="airport.name + ' - ' + airport.iata for airport in airports"></select>
    </label>
    <pre>
        {{selectedAirport}}
    </pre>
    <br/>
  </div>
</body>


angular.module（'selectExample'，[]）
.controller（'ExampleController'，['$scope'，function$scope）{
$scope.airports=[{
“id”：“1”，
“姓名”：“Goroka”，
“城市”：“Goroka”，
“国家”：“巴布亚新几内亚”，
“iata”：“GKA”，
“国际民航组织”：“AYGA”，
“纬度”：“-6.081689”，
“经度”：“145.391881”，
“高度”：“5282”，
“时区”：“10”，
“dst”：“U”，
“tz”：“太平洋/莫尔斯比港”
}, {
“id”：“2”，
“姓名”：“皇家空军克兰威尔”，
“城市”：“科宁斯比”，
“国家”：“林肯郡”，
“iata”：“QCY”，
“国际民航组织”：“EGXC”，
“纬度”：“，
“经度”：“，
“高度”：“，
“时区”：“10”，
“dst”：“U”，
“tz”：”
}];
}]);
机场：
{{selectedAirport}}

您能分享更多的代码吗？

<body ng-app="selectExample">
  <script>
    angular.module('selectExample', [])
      .controller('ExampleController', ['$scope', function($scope) {
        $scope.airports = [{
          "id": "1",
          "name": "Goroka",
          "city": "Goroka",
          "country": "Papua New Guinea",
          "iata": "GKA",
          "icao": "AYGA",
          "latitude": "-6.081689",
          "longitude": "145.391881",
          "altitude": "5282",
          "timezone": "10",
          "dst": "U",
          "tz": "Pacific/Port_Moresby"
        }, {
          "id": "2",
          "name": "RAF Cranwell",
          "city": "Coningsby",
          "country": "Lincolhshire",
          "iata": "QCY",
          "icao": "EGXC",
          "latitude": "",
          "longitude": "",
          "altitude": "",
          "timezone": "10",
          "dst": "U",
          "tz": ""
        }];
      }]);
  </script>
  <div ng-controller="ExampleController">

    <label>Airport:
      <select ng-model="selectedAirport" ng-options="airport.name + ' - ' + airport.iata for airport in airports"></select>
    </label>
    <pre>
        {{selectedAirport}}
    </pre>
    <br/>
  </div>
</body>