AngularJS過濾陣列陣列

-1

我正在嘗試爲顯示端口的網站創建一些過濾器。每個陣列都有端口，並在其中包含各個端口的陣列。AngularJS過濾陣列陣列

這是json的一個例子。

{ 
     "cruiseTitle": "Canada/New England", 
     "shipName": "Brilliance of the Seas", 
     "imageUrl": "#", 
     "region": "", 
     "StarRating": 4, 
     "ports": [ 
     "Portland, United Kingdom", 
     "Halifax, Nova Scotia, Canada", 
     "Bar Harbor, Maine", 
     "Boston, Massachusetts", 
     "Saint John, New Brunswick" 
     ], 
     "flightsAvailable": true, 
     "departureDate": "2014-09-27T23:00:00.000Z", 
     "duration": 7, 
     "price": 0, 
     "isFeatured": false, 
     "isLuxury": false 
    }

這是我實現

Ports: 
    <select ng-model="cruise" ng-options="cruise.ports for cruise in gridData.results"></select>

這只是返回端口的陣列中的一個長長的清單角。有沒有辦法讓它返回每個端口作爲選項？

任何意見/解決方案將不勝感激。

謝謝。

來源

2014-09-04 Ross_

爲什麼你希望顯示的端口的列表不同的郵輪？你不應該先選擇一艘郵輪，然後才顯示該郵輪的港口嗎？ – bmleite 2014-09-04 14:56:19

您能否給出JSON的完整結構，而不僅僅是一小段代碼。我們應該如何知道gridData和結果等等？更好的辦法是用你的代碼[JSFiddle]（http://jsfiddle.net/），我們可以直接修改而不會丟失重寫整個數據結構的時間。謝謝 – 2014-09-04 14:56:26

@bmleite我們希望顯示不同的端口，因爲用戶可能想要訪問特定端口的郵件太多，這將允許他們縮小搜索範圍。 – 2014-09-05 11:43:27

一個可能的解決方案是創建一個基於gridData.results的所有端口的列表：

<select ng-model="cruise" ng-options="port for port in getPorts(gridData.results)"></select>

和控制器上：

$scope.getPorts = function(cruises) { 
    var ports = []; 
    angular.forEach(cruises, function(cruise) { 
     angular.forEach(cruise.ports, function(port) { 
     if (ports.indexOf(port) === -1) { 
      ports.push(port); 
     } 
     }); 
    }); 
    return ports; 
    };

來源

2014-09-05 12:50:38 bmleite

這正是我一直在尋找的。非常感謝 – 2014-09-05 13:22:33

如果你只是想填充口陣列，下面是代碼

$scope.gridData = {}; 
$scope.gridData.results = { 
    "shipName": "Brilliance of the Seas", 
    "ports": [ 
    "Portland, United Kingdom", 
    "Halifax, Nova Scotia, Canada", 
    "Bar Harbor, Maine", 
    "Boston, Massachusetts", 
    "Saint John, New Brunswick" 
    ], 
    "isLuxury": false 
}; 

<select ng-model="cruise" ng-options="port for port in gridData.results.ports" ng-init="cruise = gridData.results.ports[0]"></select>

注意：您可以將gridData.results.ports至$ scope.ports，只是給NG選項=「端口;在港口「。 ng-init用於初始化數組中的第一個下拉列表。請根據您的要求更改。

來源

2014-09-04 15:25:59 Pavi

AngularJS過濾陣列陣列

回答

相關問題