Редактирование вложенных параметров выбора после добавления в повторный список - PullRequest
Новая
       21

Редактирование вложенных параметров выбора после добавления в повторный список

0 голосов
/ 26 октября 2018

Я пытаюсь создать форму, которая захватывает вложенный поток для страны / штата / города и подталкивает к объекту ng-repeat.Как только он будет добавлен в ретранслятор, я хотел бы иметь возможность редактировать этот вложенный выбор.

Я не понимаю, как ngModel и ngOptions вступают в игру после добавления вложенного объекта в повторитель.Я попробовал несколько вариантов без успеха.

Я добавил плункер, чтобы помочь объяснить проблему: http://next.plnkr.co/edit/FWLa3ErI83JLR4Jy

Эта часть вопроса работает неправильно:

HTML 

<tr ng-repeat="location in locations">
                <td>
                    <select ng-show="editable" name='CountryName' id="CountryName" class="form-control" ng-model="country" ng-options="country as country.CountryName for country in countries"
                 required>
            <option value="" disabled>Select</option>
        </select>
                    <span ng-show="!editable">{{location.CountryName}}</span>
                </td>
                <td>
                    <select ng-show="editable" name='StateName' required id="StateName" class="form-control" ng-disabled="states.length == 0" ng-model="state" ng-options="state as state.StateName for state in states">
            <option value="" disabled>Select</option>
        </select>
                    <span ng-show="!editable">{{location.StateName}}</span>
                </td>
                <td>
                    <select ng-show="editable" name='CityName' required id="CityName" class="form-control" ng-disabled="cities.length == 0" ng-model="city" ng-options="city as city.CityName for city in cities">
            <option value="" disabled>Select</option>
        </select>
                    <span ng-show="!editable">{{location.CityName}}</span>
                </td>
                <td><a class="btn btn-link" ng-click="editable = !editable">Edit</a></td>
            </tr>

JS 

$scope.recordLocation = function() {
    $scope.locations.unshift({
        CountryName: $scope.country.CountryName,
        StateName: $scope.state.StateName,
        CityName: $scope.city.CityName
    });
    $scope.city = {};
    $scope.state = {};
    $scope.country = [];
};

Требуется помощь в решении этой проблемы.

спасибо

1 Ответ

0 голосов
/ 14 ноября 2018

У вас, по сути, есть проблема с областью действия ваших объектов.(подробнее здесь: https://docs.angularjs.org/guide/scope)

Внутри вашего ng-повтора для каждого блока создается дочерняя область, которая создает собственную копию / ссылку на переменную, указанную в ng-model , если только вы используете точечную модель для свойств модели (что очень рекомендуется при использовании ng-модели).

Например, вместо $scope.city = ... и в вашем html ng-model="city" вы должны вместо этого что-то сделатькак: 

$scope.selection = {
  city: "",
  state: "",
  country: ""
}

и ваш html вы бы сделали ng-model="selection.city"

Это решит одну из ваших проблем, но вы, вероятно, все еще столкнетесь с некоторыми другими проблемами, потому что вы делитесь состоянием сОсновная форма выбора (или, возможно, вы будете в порядке с таким поведением). Я не уверен, как вы хотите и / или планируете обновить «отредактированное» местоположение после того, как пользователь делает свой выбор, поэтому я не хочу давать многоеще совет, но может иметь смысл, чтобы ng-модель в таблице использовала значения в location (то есть ng-model="location.city"), но тогда вам также придется изменить способ обновления последующего удаления.вниз значения.

...