AngularJS - 如何从 json 响应中提取两条数据并在选择（组合框）中使用它们？答案

【问题标题】：AngularJS - How would I extract two pieces of data from a json response and use them in a select (combobox)?AngularJS - 如何从 json 响应中提取两条数据并在选择（组合框）中使用它们？
【发布时间】：2015-07-11 10:53:34
【问题描述】：

我正在发出 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"}

我想提取国家和 iata 并将它们显示在我的 html 页面上的选择中，例如

巴布亚新几内亚 GKA
格陵兰UAK ...

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

【问题讨论】：

你能分享更多代码吗？

标签： javascript angularjs drop-down-menu factory

【解决方案1】：

您需要在 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>

这是一个有效的plunkr

【讨论】：

【解决方案2】：

查看ng-options 指令，该指令专门用于在select 元素上使用ng-repeat 行为：https://docs.angularjs.org/api/ng/directive/ngOptions。例如，假设您的机场数组可以在您的控制器中同步检索：

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>

或者，打印option 元素内的值：

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

【讨论】：

【解决方案3】：

你必须连接属性：

 <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>

https://jsfiddle.net/7eqsc/146/

【讨论】：

【解决方案4】：

你不需要清除返回的JSON，你可以使用ng-options，只打印你需要的：

<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>

http://plnkr.co/edit/fNJkZsRkA06EgxnRjLUQ?p=preview

【讨论】：