AngularJS Добавление дополнительных значений к выбору параметров

В настоящее время я разрабатываю приложение AngularJS.

Чего я пытаюсь достичь:

я хочу, чтобы пользователь мог выбрать адрес из раскрывающегося списка и чтобы эти данные передавались на следующий этап.

Текущие проблемы:

Мне нужно ограничить объем данных, отображаемых для параметра адреса - Номер дома, < strong>Название улицы и Почтовый индекс.

Мне нужно разрешить пользователю выбирать адрес и передавать данные (при изменении) в следующий раздел, показывающий результаты и дополнительную скрытую информацию с выбранного адреса — Область, Местность и т. д.

Ниже приведен мой код, который мне посоветовал 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>

введите здесь описание изображениявведите здесь описание изображения


ionic-framework angularjs angularjs-ng-model
person Community    schedule 22.05.2015    source источник
comment
Я понятия не имею, о чем ваш вопрос. Не могли бы вы объяснить, чего вы пытаетесь достичь?   -  person JB Nizet    schedule 22.05.2015
comment
Если вы делаете это, как в принятом ответе, вы почти наверняка делаете это неправильно. Вам не нужно выполнять манипуляции с DOM. Данные находятся в модели. Объясните, что вы пытаетесь сделать.   -  person JB Nizet    schedule 22.05.2015
comment
@JBNizet Я обновил свой вопрос!   -  person    schedule 22.05.2015

Ответы (1)


arrow_upward
0
arrow_downward

Вы не должны использовать DOM для хранения ваших данных. Данные находятся в модели, т.е. в области действия контроллера, и именно там вы должны их найти.

Вы должны использовать директиву ng-options для создания параметров. Предполагая, что адреса находятся в $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>
...

В контроллере ничего делать не нужно. И не нужно ничего хранить в атрибутах данных: данные есть в модели.

person JB Nizet    schedule 22.05.2015
comment
Абсолютно идеально, спасибо JB Nizet :) Я очень ценю ваше время и усилия, чтобы объяснить мне ответ! - person ; 22.05.2015