从JSON文件创建单个选择下拉菜单

时间:2015-03-03 07:13:37

标签: json angularjs select drop-down-menu angularjs-ng-repeat

所以我有这个需要处理的json文件: http://pastebin.com/6aYkTjsw

我正在尝试为每个版本的链接数组中的每个条目创建1个单选择下拉菜单。因此,每个版本的选择下拉菜单中基本上应添加2个条目(一个用于Windows,一个用于linux)。

然而,我失败了,因为它为每个版本制作了一个选择元素。我不能在select语句中添加另一个ng-repeat,所以我对如何实现这一点感到有点困惑。我已经使用ng-options和其他东西进行了修改,但无法让它工作。

以下是目前的实施情况:
http://plnkr.co/edit/TenmOPpXef85KAowXbTx?p=preview

代码: 的index.html

    <!-- Algorithmic Trading © -->
    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Algorithmic Trading - Revitpo Inc</title>

      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      <script src="app.js"></script>
    </head>
    <body ng-app="appDownload">
     <div ng-controller="VersionController">
     <!-- Drop Down Menu -->
     <div ng-repeat="x in deployments">
     <select>
     <option ng-repeat="y in x.links" value="{{y.link}}">{{x.short_descr}} ({{y.os}})</option>
     </select>
     </div>
     </div>

    <tt>Copyright © 2015. Revitpo Inc. All Rights Reserved.</tt>
    </body>
    </html>

app.js

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

    app.controller("VersionController", function($scope, $http) {
      $http.get('http://algorithmictrading.azurewebsites.net/json/versions.json').
        success(function(data, status, headers, config) {
          $scope.deployments = data;
        });
    });

1 个答案:

答案 0 :(得分:0)

我解决了我的问题。 (实际上来自#angularjs的freenode irc的冰箱为我解决了这个问题。)

这是我最终使用的:

的index.html

<!-- Algorithmic Trading © -->
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Algorithmic Trading - Revitpo Inc</title>

  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <script src="app.js"></script>
</head>
<body ng-app="appDownload">
 <div ng-controller="VersionController">
 <!-- Drop Down Menu -->
 <select>
 <option ng-repeat="deployment in deployments" value="{{deployment.link}}">{{deployment.short_descr}} ({{deployment.os}})</option>
 </select>
 </div>

<tt>Copyright © 2015. Revitpo Inc. All Rights Reserved.</tt>
</body>
</html>

app.js

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

app.controller("VersionController", function($scope, $http) {

  $scope.deployments = [];

  //Retrieve all build versions
  $http.get('json/versions.json').
  success(function(data, status, headers, config) {
    //Push required fields onto array
    data.forEach(function(item1) {
      item1.links.forEach(function(item2) {
        $scope.deployments.push({
          short_descr: item1.short_descr,
          link: item2.link,
          os: item2.os
        });
      });
    })
  });

});