javascript - 从 AngularJS 中的 json 对象绑定(bind)选择下拉列表

Question

我是 Angular 新手，这是我遇到的第一个主要障碍。我从第三方地址数据 API 返回了以下 JSON 对象，该对象已添加到 Controller 中的 $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 来循环这些地址，瞧!

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