AngularJS向选项选择添加附加值

Question

我目前正在开发一个 AngularJS 应用程序。

我想要达到的目标：

我希望用户能够从选择下拉列表中选择一个地址，并将此数据传递到下一阶段。

当前问题：

我需要限制每个地址选项显示的数据量 - House Number、Street Name 和 Post Code。

我需要能够允许用户选择一个地址并将数据（更改时）传递到下一部分，显示结果和来自所选地址的附加隐藏信息 - 区域， 地点等

下面是我的代码，Vineet 建议我这样做。

任何帮助/建议都会有所帮助！



HTML - 第一部分（选择地址）

<form class="introForm" id="introForm" name="introForm">
    <label class="item noborder"><select>
        <option data-addressone="{{address['Address 1']}}" data-addresstwo=
        "{{address['Address 2']}}" data-area="{{address.Area}}" data-day=
        "{{address.Day}}" data-locality="{{address.Locality}}" data-number=
        "{{address.Number}}" data-postcode="{{address.Postcode}}"
        data-streetname="{{address.Streetname}}" data-week=
        "{{address.Week}}">
            {{address.Number}} {{address['Address 1']}} {{address['Address
            2']}} {{address.Postcode}}
        </option>
    </select></label> <button class="button submit">Next</button>
</form>

控制器

$scope.addressSelect = function() {
    var angElement = angular.element(document.querySelector('select option'));
    $scope.introData.confirmAddress.number = angElement.attr('data-number');
    $scope.introData.confirmAddress.addressone = angElement.attr(
        'data-addressone');
    $scope.introData.confirmAddress.addresstwo = angElement.attr(
        'data-addresstwo');
    $scope.introData.confirmAddress.streetname = angElement.attr(
        'data-streetname');
    $scope.introData.confirmAddress.area = angElement.attr('data-area');
    $scope.introData.confirmAddress.locality = angElement.attr(
        'data-locality');
    $scope.introData.confirmAddress.locality = angElement.attr(
        'data-postcode');
    $scope.introData.confirmAddress.day = angElement.attr('data-day');
    $scope.introData.confirmAddress.week = angElement.attr('data-week');
}

HTML - 第二部分（显示选定的结果）

<div class="item noborder nopadding confirmAddress">
    <p><span>{{introData.fullname}}</span>
    <span class="email">{{introData.email}}</span>
    <span>{{introData.confirmAddress.number}}</span>
    <span>{{introData.confirmAddress.addressone}}</span>
    <span>{{introData.confirmAddress.addresstwo}}</span>
    <span>{{introData.confirmAddress.streetname}}</span>
    <span>{{introData.confirmAddress.area}}</span>
    <span>{{introData.confirmAddress.locality}}</span>
    <span>{{introData.confirmAddress.postcode}}</span></p>
</div>

Answer 1

您不应该使用 DOM 来存储您的数据。数据在模型中，即在控制器的范围内，您应该在那里找到它。

您应该使用ng-options directive 来生成您的选项。假设地址在$scope.addresses 中，则代码如下所示：

<select ng-model="selectedAddress" ng-options="(address.Number + ' ' + address['Address 1'] + ' ' + address['Address
        2'] + ' ' + address.Postcode) for address in addresses"></select>

然后，感谢ng-model，每次用户进行选择时，完整的选定地址（即地址对象本身）将通过角度存储在$scope.selectedAddress中。

所以，要显示所选地址，您现在只需要

<span>{{selectedAddress.number}}</span>
<span>{{selectedAddress['Address 1']}}</span>
<span>{{selectedAddress['Address 2']}}</span>
<span>{{introData.streetname}}</span>
...

无需在控制器中执行任何操作。并且不需要在数据属性中存储任何内容：数据在模型中。