從JSON文件

所以我有這個JSON文件創建一個單一選擇下拉菜單，我需要處理： http://pastebin.com/6aYkTjsw 從JSON文件

我試圖做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; 
     }); 
    });

來源

2015-03-03 Mohammad

我解決我的問題。（其實，#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 
     }); 
     }); 
    }) 
    }); 

});

來源

2015-03-03 11:16:31 Mohammad

回答

相關問題