AngularJS向选项选择添加其他值

Question

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

我想要实现的目标：

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

当前问题：

我需要限制每个地址显示的数据量 - 门牌号，街道名称＆amp; 邮政编码。

我需要能够允许用户选择地址并将数据（在更改时）传递到显示结果的下一部分以及所选地址的其他隐藏信息 - 区域， 地点等。

以下是我的代码，我已经通过 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>
...

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