如何将嵌套的 json 数据绑定到 angularjs 下拉列表中？答案

【问题标题】：how to bind nested json data into angularjs dropdown?如何将嵌套的 json 数据绑定到 angularjs 下拉列表中？
【发布时间】：2019-02-12 11:10:58
【问题描述】：

我在下面有一些与 timzone 相关的 json 数据，我需要将特定的嵌套值绑定到下拉列表中，在使用 angularjs 时，在时区数组中它以字符串格式出现，我需要将它们绑定到下拉列表中。

timezone.json --

 {
      "countries": {
     "US": {
          "id": "US",
          "name": "United States",
          "timezones": [
            "America/New_York",
            "America/Detroit",
             ]
        },
     "CA": {
          "id": "CA",
          "name": "Canada",
          "timezones": [
            "America/St_Johns",
            "America/Halifax",
           ]
        },
    "IN": {
          "id": "IN",
          "name": "India",
          "timezones": [
            "Asia/Kolkata"
          ]
        },
    }
    }

脚本--

$http({
    method: "GET",
    url: 'timezon.json'
}).then(function mySuccess(response) {
    $scope.timeZones = response.data;
}, function myError(response) {
    $scope.timeZones = response.statusText;
});

HTML 内容

 <select class="form-control">
        <option value="0">--Select Time Zones></option>
  </select>

【问题讨论】：

标签： javascript jquery html angularjs

【解决方案1】：

您可以使用以下内容遍历您的对象键并填充您的选择。

<select class="form-control">
    <option value="0">--Select Time Zones></option>
    <option ng-repeat="(key, value) in data.countries" value="value.id">{{value.timezones.toString()}}</option>
</select>

Demo

【讨论】：

非常感谢兄弟，但下拉菜单中的时间区值会继续小幅变化。我想要这样。 next.plnkr.co/edit/2vj4PK?p=preview&preview
@PK-1825 你的预期输出是什么？
时区值应在受尊重的国家/地区的下拉列表中。

【解决方案2】：

首先操作数据，然后填充选择

HTML

<div ng-app="app" ng-controller="Ctrl" ng-init="getTimeZones">
  <h1>{{selectedTimezone}}</h1>
<select ng-model="selectedTimezone" ng-options="item for item in timezones">
</select>
</div>

var app = angular.module("app", []);

app.controller('Ctrl', function($scope, $filter) {
  $scope.timezones = []
  $scope.data = {
    "countries": {
     "US": {
          "id": "US",
          "name": "United States",
          "timezones": [
            "America/New_York",
            "America/Detroit",
             ]
        },
     "CA": {
          "id": "CA",
          "name": "Canada",
          "timezones": [
            "America/St_Johns",
            "America/Halifax",
           ]
        },
    "IN": {
          "id": "IN",
          "name": "India",
          "timezones": [
            "Asia/Kolkata"
          ]
        },
    }
  }

  $scope.getTimeZones = setTimeout(function(){ 
    // http request here after success
    for (var key in $scope.data.countries) {
      var timezones = $scope.data.countries[key].timezones;
      timezones.unshift($scope.data.countries[key].name);
      Array.prototype.push.apply($scope.timezones, timezones);
      // For ES6
      // $scope.timezones.push(...timezones)
    }

  }, 1000);

});

Demo

【讨论】：