AngularJS

Question

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

{"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 页面上的 select 中，例如

巴布亚新几内亚 GKA
格陵兰大学 ...

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

Answer 1

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

Answer 2

您必须连接属性：

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

Answer 3

您需要在 select 语句中使用 ng-options 指令。

假设您的数据数组包含这样的对象：

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

您可以将它们显示在 select 中，如下所示：

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

这是一个有效的 plunkr

Answer 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

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

AngularJS - How would I extract two pieces of data from a json response and use them in a select (combobox)?

javascript

factory

drop-down-menu