从AngularJS中的json对象绑定选择下拉列表

Question

我是Angular的新手，这是我的第一个主要障碍。 我有一个从地址数据的第三方API返回的以下JSON对象，该地址已添加到控制器的$ 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演示

// 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>