在AngularJS中綁定json對象的select下拉菜單

Question

我是Angular的新手，這是我的第一個主要障礙。我有以下的JSON對象從地址數據的第三方API，它已添加到$ scope.AddressData在控制器返回：

$scope.AddressData = [{ 
    "Address1":"South Row", 
    "Address2":"Horsforth", 
    "Address3":null, 
    "Address4":null, 
    "Town":"Leeds", 
    "County":"West Yorkshire", 
    "Postcode":"LS18 4AA", 
    "PremiseData":"12;||13;||14;" 
}]; 

正如你所看到的，我有多個處所一條街。我想要實現的是有一個選擇框，每個PremiseData項目都有一行，其他字段附加到它。

給定上述示例，我希望HTML爲：

<select name="premises"> 
    <option value="12 South Row, Horsforth, Leeds, West Yorkshire"></option> 
    <option value="13 South Row, Horsforth, Leeds, West Yorkshire"></option> 
    <option value="14 South Row, Horsforth, Leeds, West Yorkshire"></option> 
</select> 

而且，一旦一個項目被選擇時，我要填充與相關數據的其它輸入。

任何人都可以指向正確的方向嗎？

Answer 1

這是比Angular更多的JavaScript相關的，但你只需要分開那些PremiseData的和建立你自己的對象。

jsFiddle Demo

// No point in adding this to your scope since you're not using it there 
var addressData = [{ 
    "Address1":"South Row", 
    "Address2":"Horsforth", 
    "Address3":null, 
    "Address4":null, 
    "Town":"Leeds", 
    "County":"West Yorkshire", 
    "Postcode":"LS18 4AA", 
    "PremiseData":"12;||13;||14;" 
}]; 

$scope.addresses = []; 

for (var i = 0; i < addressData.length; i++) { 

    // Remove that last " ; " 
    addressData[i].PremiseData = addressData[i].PremiseData.substr(0, addressData[i].PremiseData.length - 1); 

    // Split by ;|| 
    var premises = addressData[i].PremiseData.split(';||'); 

    // Build new address 
    for (var n = 0; n < premises.length; n++) { 
     var address = premises[n] + ' ' 
      + addressData[i].Address1 + ' ' 
      + addressData[i].Address2 + ' ' 
      + addressData[i].Town + ' ' 
      + addressData[i].County; 

     // Add this built address to your 
     $scope.addresses.push(address);   
    } 
} 

然後在你的HTML，你只需使用ng-options遍歷這些addresses，瞧！

<select ng-model="selectedAddress" ng-options="a as a for a in addresses"></select>