AngularJS 向选项添加附加值 Select

Question

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

我要实现的目标：

我希望用户能够 select 来自 select 下拉列表的地址，并将此数据传递到下一阶段。

当前问题：

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

我需要能够允许用户 select 地址并将数据（更改时）传递到下一部分，以显示结果和 selected 中的其他隐藏信息地址 - 地区、地区等

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

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

HTML - 第一部分（Select 地址）

<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 - 第二部分（显示 Selected 结果）

<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，每次用户进行选择时，完整的选定地址（即地址对象本身）将由 angular 存储在 $scope.selectedAddress 中。

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

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

无需在控制器中做任何事情。并且无需在数据属性中存储任何内容：数据在模型中。

AngularJS 向选项添加附加值 Select

AngularJS Adding additional Values to Option Select

angularjs

ionic-framework

angularjs-ng-model